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