- Published on
VUE-CLI快速配置
- Authors
- Name
- Hansuku
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