脚手架Vue-CLI2初体验——项目初始化/文件夹结构解读
安装Vue-CLI
1. 全局安装(cli3)
npm install -g @vue/cli
2. 为使用cli2,需拉取cli2的模板
npm install -g @vue/cli-init
这样cli2即可使用vue init命令
3. 创建项目
- cli2项目
vue init webpack projectName
- cli3项目
vue create projectName
3.1. 创建项目时的各种选项
- Project name 项目名
- Project description 描述
- Author 作者(默认值读取本地gitconfig)
- Vue-build(选择vue的构建版本)
- runtime+compiler 运行时+编译器(完整版)
- runtime-only 仅运行时
- vue-router 路由
- ESLint
- unit test 单元测试
- e2e test 端到端测试
- npm or yarn
生成的项目文件夹-解读
- build: webpack相关配置文件
- config:webpack相关配置文件(一些变量等的定义,build中用到)
- node_modules:当前项目依赖的npm包
- src:源码
- static:静态资源(这里的东西会原封不动的被复制到dist中)(src中的文件会根据url-loader等的配置选择base64转码或复制)
- 其他文件
- .babellrc —— ES代码相关转化配置(babel的配置)
{ "presets": [ ["env", { "modules": false, "targets": { // 市场占有率大于1%的浏览器,最后两个版本,ie8以上 "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], //js阶段,2以上 "stage-2" ], "plugins": ["transform-vue-jsx", "transform-runtime"] }
- .editorconfig —— 项目文本相关配置(对代码进行统一,缩进风格,换行,编码等)
root = true //必须有 [*] charset = utf-8 //编码 indent_style = space //缩进风格 indent_size = 2 //缩进大小 end_of_line = lf //换行符 insert_final_newline = true //在文件最后加空行 trim_trailing_whitespace = true //删除无效空格
- .eslintignore —— 代码检测忽略的设置
- .eslintrc.js —— eslint的配置
- .gitignore —— git仓库忽略的文件夹配置
- .postcssrc.js —— css转化相关配置
- index.html —— 模板html文件
- package.json —— node相关配置
- package-lock.json —— 记录真实安装的各种包的版本(package.json中^,~设置的版本是不固定的)
- README.md
- .babellrc —— ES代码相关转化配置(babel的配置)
4. package.json中的命令script设置
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
}
4.1. build指令:直接执行build/build.js文件
"build": "node build/build.js"
4.1.1. build.js文件
- rm:(remove)先清除之前的配置,之后再执行webpack配置等
- webpack(webpackConfig, fn); —— 使用webpack.prod.conf
//...
const webpackConfig = require('./webpack.prod.conf')
//...
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
if (err) throw err
webpack(webpackConfig, (err, stats) => {
spinner.stop()
//...
})
})
4.1.2. webpack.prod.conf.js文件
const webpackConfig = merge(baseWebpackConfig, {
//....
4.2. dev指令:
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
- --inline
- --progress 显示进度
- --config build/webpack.dev.conf.js" 指定配置文件
4.2.1. webpack.dev.conf.js文件
有关于devServer(本地服务器)的设置等
//..
const devWebpackConfig = merge(baseWebpackConfig, {
module: {
//...
devServer:{
//...
}
}
});