VUE-CLI

vue-cli是vue配置的一个手脚架，能够快速搭建项目开发环境

npm init
npm install vue-cli -g

然后开始配置VUE-CLI

vue init webpack vuecli

这里的webpack是可配置的，模板为

$ vue init < template-name >  < project-name >

template-name在官方github上有介绍，主要就是配合模板用会直接给你装一些工具，比如这里用的就是webpack.

然后在安装中会询问几个问题：

? Project name vuecli       //项目名称
? Project description A Vue.js project  //描述
? Author Hansuku <1556207795@qq.com>    //作者
? Vue build standalone
? Install vue-router? Yes       //是否安装VUE路由
? Use ESLint to lint your code? Yes     //是否安装代码规范和错误检查工具，推荐多人协作大项目时使用
? Pick an ESLint preset Standard        //选择ESLint预设
? Setup unit tests No       //安装单元测试
? Setup e2e tests with Nightwatch? No   //是否安装e2e模拟用户工具

安装后根据提示初始化项目手脚架:

To get started:

     cd vuecli
     npm install   //这里会安装刚刚配置了并且写入在package.json的工具
     npm run dev

上面npm install的时候可能会很久可以尝试使用cnpm安装
安装完成后npm run dev会开始自动构建打包然后生成本地预览打开预览网址就就可以看到VUE.js的欢迎界面了

package.json解读
通常在package.json中有三个基础变量：

    "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
    },

前两项dev和start都是指向npm run dev，构建一个服务器运行
build即为webpack打包构建
- webpack的配置
在安装了webpack的模板后常用的webpack模块和插件都会自己装上，正常是不需要配置的，当前版本的webpack配置目录在build下。webpack.dev.config.js主要做服务器环境，可以在里面更改host地址
webpack.base.config.js可以配置模块、插件、入口文件和出口文件、压缩方式
- babelrc配置
在根目录下会直接生成.babelrc，babelrc也是配置好的基本不用更改
- editorconfig配置
editorconfig是编码方式控制

    root = true
    [*]    //对所有文件都应用规则
    charset = utf-8    //编码规则使用utf-8
    indent_style = table    //缩进用table
    indent_size = 1    //缩进数量为一个table
    end_of_line = lf    //换行符格式
    insert_final_newline = true    //在文件最后插入空行
    trim_trailing_whitespace = true    //删除尾行空格

npm run build
可以直接使用npm run build直接生成dist

本文由 Hansuku 创作，除注明转载/出处外，均为本站原创，转载前请务必署名
最后编辑时间为: 2017-11-14 16:30 Tuesday

VUE-CLI快速配置

VUE-CLI