vuecli-CLI2目录结构解析

vuecli-CLI2目录结构解析

先看package.json

"name": "vuecli2test",
"version": "1.0.0",
"description": "test vue cli2",
"author": "lcq <[email protected]>",
"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文件夹

关闭eslint