一起编程吧论坛

?找回密码
?立即注册
搜索
查看: 321|回复: 8
打印 上一主题 下一主题

Vue之旅-Vue环境搭建

[复制链接]
  • TA的每日心情
    开心
    2017-10-25 13:07
  • 签到天数: 1 天

    [LV.1]初来乍到

    1

    主题

    3

    帖子

    16

    积分

    Lv1码农

    Rank: 1

    积分
    16
    跳转到指定楼层
    楼主
    发表于 2017-10-25 13:28:39 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
    一、准备工作:
      程序员必备环境:Node.js和Git
    二、开始工作:
      1.执行命令? ?$??npm install -g vue-cli
       注:-g为全局安装,如果是mac按如下写法:sudo npm install -g vue-cli
         vue-cli提供了几种模板,如下三种模式:
         Simple(太简单,就一个index.html文件)、webpack-simple(比较实用)、webpack(较全,内置有方法检查、单元测试等。)
      2.创建项目(或者说模版项目)命令格式:vue init ??---??vue init 模版名称 项目名称(小写英文字母)
        注:
          执行命令 vue init webpack vuetest??命令窗口会出现提示 (全部默认enter 就可以了)提示如下
          ?Project name (vuetest)? ?
          ? Project name vuetest
          ? Project description (A Vue.js project)
          ? Project description A Vue.js project
          ? Author (songxibin)
          ? Author songxibin
          ? Vue bUIld standalone
        下边的提示案情况选择,是和否都可以试试,提示以此为vue-router(路由) eslint(代码检查)等。此时项目创建完毕,ctrl+c退出创建 cd vuetest进入刚才创建的vuetest项目
       3.执行命令 npm install 安装依赖。
       4.依赖安装完毕执行命令 npm run dev 运行项目,默认为本地8080端口。
       5.编译并打包,将打包好的dist丢到服务器上:
        npm run build
       三、vue+webpack构建 
        首先创建项目文件夹,进入文件(空文件)
        打开控制台或git??安装webpack 和 webpack-dev-server
        执行命令 npm install -g webpack webpack-dev-server
        项目初始化??执行命令 npm init -y
        //项目目录下安装依赖
        npm install webpack webpack-dev-server style-loader css-loader babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime --save-dev
        //vue相关依赖
        npm install vue vue-loader vue-html-loader vue-style-loader??vue-hot-reload-api vue-template-compiler --save-dev
        //安装vue
        npm install vue --save
        配置文件 webpack.config.js 内容
          var path = require('path');
          var webpack = require('webpack');
          module.exports = {
            entry: './src/app.js',
            output: {
              /* 输出目录,没有则新建 */
              path: path.resolve(__dirname, './dist'),
              /* 静态目录,可以直接从这里取文件 */
              publicPath: '/dist/',
              /* 文件名 */
              filename: 'build.js'
            },
          module: {
            rules: [
              /* 用来解析vue后缀的文件 */
              {
                test: /\.vue$/,
                loader: 'vue-loader'
              },
              /* 用babel来解析js文件并把es6的语法转换成浏览器认识的语法 */
              {
                test: /\.js$/,
                loader: 'babel-loader',
             /* 排除模块安装目录的文件 */
              exclude: /node_modules/
              }
          }
        }

        app.js内容
        import Vue from 'vue'
        //import Hello from "../../src/components/Hello.vue";
        //使用全局函数注入组件,就不用import和在创建Vue对象时定义components键值
        Vue.component('Hello', require("../../src/components/Hello.vue"));
        new Vue({
          el: "#app",
          //定义template可以不用在html中插入""
          //template: '',
          //components: { Hello }
        });

        Hello.vue 内容:
        {{msg}}
        body{
          background-color:#eee;
        }
        export default{
          data(){
            return{
              msg:'this is template body vue'
            }
          }
        }

        index.html 内容
        
        
        
          vue-webpack
        
        
          
          
        




    本主题由 admin 于 2018-9-16 06:52 移动
    收藏收藏 支持支持 反对反对
    帖子永久地址:?

    一起编程吧论坛 - 论坛版权1、一起编程吧论坛发布资料仅供学习研究,不得用于商业行为,请在下载后24小时内自觉删除
    2、一起编程吧论坛资料来自于互联网的搜集整理和网友分享,版权归原作者所有,本站不做实质存储,仅提供资料链接整理服务
    3、如本帖侵犯到任何版权问题,请提供版权证明并告知本站(点击右侧在线咨询或者发送邮件admin@yqbc8.com),本站核实后将及时予与删除并致以最深的歉意
    4、会员的言论和行为不代表一起编程吧论坛立场,请会员务必遵照当地法律法规使用本站
    5、本站会员应仔细阅读免责声明,一旦使用注册本站会员,即被视为您已接受本站的免责声明!

    回复

    举报

  • TA的每日心情
    奋斗
    2018-5-27 07:23
  • 签到天数: 87 天

    [LV.6]常住居民II

    0

    主题

    153

    帖子

    463

    积分

    Lv1码农

    Rank: 1

    积分
    463
    沙发
    发表于 2017-10-25 16:08:42 | 只看该作者
  • TA的每日心情
    奋斗
    2018-6-5 00:03
  • 签到天数: 398 天

    [LV.9]以坛为家II

    70

    主题

    717

    帖子

    1906

    积分

    Lv5金牌架构师

    Rank: 6Rank: 6

    积分
    1906
    板凳
    发表于 2017-10-30 15:07:51 | 只看该作者
  • TA的每日心情
    奋斗
    2018-6-5 00:03
  • 签到天数: 398 天

    [LV.9]以坛为家II

    70

    主题

    717

    帖子

    1906

    积分

    Lv5金牌架构师

    Rank: 6Rank: 6

    积分
    1906
    地板
    发表于 2017-10-30 15:08:08 | 只看该作者
  • TA的每日心情
    奋斗
    2018-6-5 00:03
  • 签到天数: 398 天

    [LV.9]以坛为家II

    70

    主题

    717

    帖子

    1906

    积分

    Lv5金牌架构师

    Rank: 6Rank: 6

    积分
    1906
    5#
    发表于 2017-10-30 15:08:58 | 只看该作者
  • TA的每日心情
    奋斗
    2018-6-5 00:03
  • 签到天数: 398 天

    [LV.9]以坛为家II

    70

    主题

    717

    帖子

    1906

    积分

    Lv5金牌架构师

    Rank: 6Rank: 6

    积分
    1906
    6#
    发表于 2017-10-30 15:09:18 | 只看该作者
  • TA的每日心情

    2017-12-21 09:08
  • 签到天数: 19 天

    [LV.4]偶尔看看III

    1

    主题

    54

    帖子

    135

    积分

    Lv2初级程序猿

    Rank: 2

    积分
    135
    7#
    发表于 2017-11-28 18:29:30 | 只看该作者
    文章挺好就是图片不能显示啊
  • TA的每日心情
    开心
    2018-1-13 11:23
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    0

    主题

    13

    帖子

    29

    积分

    Lv1码农

    Rank: 1

    积分
    29
    8#
    发表于 2017-12-20 16:48:39 | 只看该作者
  • TA的每日心情
    奋斗
    2018-6-3 06:08
  • 签到天数: 41 天

    [LV.5]常住居民I

    0

    主题

    122

    帖子

    439

    积分

    Lv1码农

    Rank: 1

    积分
    439
    9#
    发表于 2018-5-27 09:35:16 | 只看该作者
    谢谢111111
    返回列表 发新帖
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    亚博手机登录平台

    QQ|小黑屋|Archiver|一起编程吧 ???

    GMT+8, 2019-8-25 00:30 , Processed in 0.407456 second(s), 32 queries , Gzip On.

    ? 2013-2018 一起编程吧论坛

    快速回复 返回顶部 返回列表