vuecli-CLI2目录结构解析
先看package.json
"name": "vuecli2test",
"version": "1.0.0",
"description": "test vue cli2",
"author": "lcq <2226298119@qq.com>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
},
创建项目时配置的信息,还有预设的script命令,npm run dev等价于npm run start.
npm run dev 里就是启动服务命令和执行相关配置文件命令
npm run build就是执行build/build.js目录下的build.js文件,打包文件
接下来看一下build.js文件
删除上次打包的文件夹
再次拿到webpackConfig配置信息,这个webpackConfig是上边导入的
const webpackConfig = require('./webpack.prod.conf')
之前配置分离讲过,dev运行时配置,prod开发时配置,分离开来,同时还有一个base基础配置共有的,然后采用webpack-marge合并
再看看base.js
这不就是当初我们手动配置的东西吗,有很多熟悉的东西
config文件夹下
都是配置一些基础变量
static文件夹
该文件夹下的内容到时候发布时,会原封不动复制到dist文件夹下
.babelrc文件
安装"babel-preset-env": “^1.3.2”,后会要求单独生成.babelrc配置文件,而不是在webpack配置文件里配置。
es6以上转成es5的配置文件
配置浏览器史称份额大于1%,并且是其最后的两个版本,不考虑ie<=8
es有很多阶段,只针对第二阶段进行转换
安装的插件
.editorconfig文件
.eslintignore文件
以下地方的代码不采用eslint规范,忽略
.gitignore文件
git上传文件时,忽略的文件。
.eslintrc.js文件
代码检测配置
.postrcssrc.js文件
进行css转换时的配置
index.html文件
模板文件
package.json文件
管理node里边的包
package-lock.json文件
与package.json文件相互映射
package.json文件里很多版本都加了^符号,意味着版本号最后一位只要大于等于配置的即可
~代表版本号后两位都可以变换,只要大于等于配置的即可,第一位不能变。
那么真实安装的可能和配置的不一样,package-lock.json就是真实安装的版本
README文件
写一些文档相关信息。
如果安装vue脚手架不成功,首先考虑是否管理员身份运行cmd,其次清理缓存
clean cache --force
或删除C:\Users\liuch\AppData\Roaming\npm-cache文件夹