淺入瞭解 vue cli3.0 生成了什麼東西

肥貓Charles發表於2018-12-13
Vue

前言

大家可能也看過一些解釋腳手架生成檔案的解釋，而且很詳細。

但可能就是因為太詳細，幾千上萬字的，容易看著看著就不願意看了。

所以這篇文章儘可能簡單一點能解釋通順，讓大家能大概理解腳手架生成了什麼東西。

檔案結構

|-- 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

相關文章