淺入瞭解 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