vue-cli@3.x初體驗以前篇-回顧vue-cli@2.x建立項目的流程

時間 2019-12-05

標籤 vue cli@3.x cli 體驗以前回顧 cli@2.x 建立項目流程简体版

原文原文鏈接

模擬實際工做中的操做，假如新開啓了一個vue項目，能夠先看看上篇博文中的git操做,新建空倉庫vue-demo，並拉取到本地，建立本地dev分支後javascript

1. 全局安裝vue-cli

yarn global add vue-cli
// 檢查是否已安裝成功
vue -V
// 2.9.6

2. 使用vue init 建立項目，官方提供了6種模板,對於大多數人而言，工做中選擇webpack模板

// 使用vue init 建立項目(.指當前目錄)
vue init webpack .

? Generate project in current directory? (Y/n)
// 是否在當前文件下建立項目：輸入y,回車
? Project name (vue-demo)
// 項目名稱：不輸入，直接回車
? Project description A Vue.js project
// 項目描述：不輸入，直接回車
? Author (xxxxx <123456@xxx.com>)
// 做者：不輸入，直接回車
? Vue build (Use arrow keys)
> Runtime + Compiler: recommended for most users
  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue
  files - render functions are required elsewhere
// 第一個是vue官方推薦大部分用戶用這個，這個表示能夠不基於 .vue 文件作開發，能夠在運行時作編譯，由於它有一個 compiler。
// 若是選第二個，min + gzip後，vuejs文件會減少6KB，由於它省略了templates模板的編譯過程， 由於這個編譯過程是webpack 用 vue-loader 去編譯.vue 作的, 可是必須依賴 .vue文件作開發。
// 選第一個，回車
? Install vue-router? (Y/n)
// 是否安裝路由：輸入y, 回車
? Use ESLint to lint your code? (Y/n)
// 是否使用ESlint規範代碼：輸入y, 回車
? Pick an ESLint preset (Use arrow keys)
> Standard (https://github.com/standard/standard)
  Airbnb (https://github.com/airbnb/javascript)
  none (configure it yourself)
// 選擇哪一種 ESlint 規範預設。選擇 standard 規範，回車
? Set up unit tests (Y/n)
// 是否設置單元測試：輸入 n，回車
? Setup e2e tests with Nightwatch? (Y/n)
// 是否用 Nightwatch 設置 E2E測試：輸入n, 回車
? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPM
  Yes, use Yarn
  No, I will handle that myself

// 是否在建立完項目後自動安裝依賴，並選擇一種依賴管理工具
// 上下箭頭選擇 Yarn, 回車

3. 看下默認生產的目錄和文件有哪些

.
|-- build                            // 編譯腳本文件夾，包括全部的loaders、plugins安裝配置
|   |-- build.js                        // 生產環境構建代碼
|   |-- check-version.js                // 檢查當前node、npm等版本
|   |-- logo.png                        // 在utils.js中被引用，用於報錯時顯示個默認的圖標
|   |-- utils.js                        // 靜態資源路徑配置、樣式文件的loaders配置
|   |-- vue-loader.conf.js              // vue-loader的一些配置
|   |-- webpack.base.conf.js            // webpack基本配置
|   |-- webpack.dev.conf.js             // webpack開發環境配置
|   |-- webpack.prod.conf.js            // webpack生產環境配置
|-- config                           // 生產環境與開發環境相關路徑、代理、環境變量等，須要本身配置
|   |-- dev.env.js                      // 設置開發環境變量
|   |-- index.js                        // 開發和生產環境下的用戶配置
|   |-- prod.env.js                     // 設置生產環境變量
|-- src                              // 項目源碼
|   |-- assets                          // 資源目錄
|   |   |-- logo.png
|   |-- components                      // vue公共組件目錄
|   |   |-- HelloWorld.vue              
|   |-- router                          // 路由配置目錄
|   |   |-- index.js                    
|   |-- App.vue                         // 根組件
|   |-- main.js                         // 程序入口文件，加載各類公共組件
|-- static                           // 純靜態文件，好比一些圖片，字體，media數據等
|   |-- .gitkeep                     // 只是爲了讓git能上傳static空文件夾
|-- .babelrc                         // ES6語法編譯配置
|-- .editorconfig                    // 定義項目的編碼規範，優先級比編輯器自己的設置高
|-- .eslintignore                    // eslint規則須要忽略的文件夾或文件格式
|-- .eslintrc.js                     // eslint配置
|-- .gitignore                       // git上傳須要忽略的文件格式
|-- .postcssrc.js                    // 默認支持postcss, postcss的一些配置
|-- index.html                       // 入口頁面模板
|-- package.json                     // 安裝包詳情
|-- README.md                        // 項目說明
|-- yarn.lock                        // 鎖定安裝依賴的版本
.

針對這份生成的項目文件，你可能想了解更多東西（選讀，暫時不理解也不要緊）css

參考連接：html

https://www.cnblogs.com/ye-hcj/category/1139190.htmlvue

https://segmentfault.com/a/1190000012472099java

https://vuejs-templates.github.io/webpack/node

https://vue-loader.vuejs.org/zh/webpack

https://cloud.tencent.com/developer/doc/1250git

4. 還須要作什麼？

4.1 關於eslint中的standard規範

通常狀況下，vue-cli官方並不推薦咱們去改build裏面的配置文件，而是建議咱們去修改config/index.js文件。記得之前剛開始的時候有些博客教人去改build/weppack.dev.conf.js裏面關於eslint蒙層顯示的問題，由於他們很不習慣eslint規則，老是寫一句話就報一個錯。其實這是錯誤的作法。並且並不建議你們把config/index.js中的useEslint設爲false。
其實對於這個問題挺好解決的：
開發環境：vscode作vue項目時的一些配置github