浅入了解 vue cli3.0 生成了什么东西

前言

大家可能也看过一些解释脚手架生成文件的解释，而且很详细。

但可能就是因为太详细，几千上万字的，容易看着看着就不愿意看了。

所以这篇文章尽可能简单一点能解释通顺，让大家能大概理解脚手架生成了什么东西。

文件结构

|-- vue-cli 3.0
    |-- .gitignore  // git 忽略文件目录
    |-- babel.config.js // Babel 配置项
    |-- package.json // 配置文件 下面详解
    |-- README.md // 读我（项目介绍）
    |-- yarn.lock
    |-- public
    |   |-- favicon.ico // 网页tab的logo
    |   |-- index.html // 入口
    |-- src
        |-- App.vue 
        |-- main.js // 全局 js (App.vue挂载到#app)
        |-- assets // 资源目录
        |   |-- logo.png 
        |-- components // 组件目录
            |-- HelloWorld.vue 
复制代码

package.json

{
  "name": "hello-world",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "vue": "^2.5.17"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.5",
    "@vue/cli-plugin-eslint": "^3.0.5",
    "@vue/cli-service": "^3.0.5",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0-0",
    "vue-template-compiler": "^2.5.17"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}
复制代码

相应解释：

name：项目名 (如果发布到线上不能重名，只在本地跑忽略)

version：版本号

private：true（若true，设置拒绝发布）

scripts：定义命令行可运行的脚本命令例如：使用时 npm run serve 即可（例如serve是定义的key）

{
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
} 
复制代码

dependencies: 定义生产环境依赖的包和版本号

devDependencies：定义开发环境依赖的包和版本号

两者特点为：
    1.npm install 将安装两个环境依赖下的包
    2.如果只需要生产环境的依赖，则运行npm install packagename
    3.如果只需要开发环境的依赖，则运行npm install packagename --dev
复制代码

eslintConfig：代码规范和错误检查工具配置项，具体配置查看：click

postcss: Vue CLI 内部使用了 PostCSS , 默认开启了 autoprefixer。

autoprefixer的作用:根据当前浏览器的普及度以及属性支持提供给你前缀

    举个例子应该都会明白：
    
    使用前：
    a{
         transition :transform 1s
    }

    使用后：
    a{
         -webkit-transition :-webkit-transform 1s;
         transition :-ms-transform 1s;
         transition :transform 1s
    }
复制代码

browserslist：指定了项目的目标浏览器的范围。

这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。

具体怎么定义范围查看：[click](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint)
复制代码

结语

cli 3.0 大概生成的文件解释就这么多。

官方文档上可以在项目上拓展很多插件和功能。

例如vue.config.js有很多可配置项可以了解一下。

具体：vue cli