vue-cli腳手架——3.0版本項目案例


一、【准備工作】

node與git部分見vue-cli2.0搭建案例

vue-cli3.0是一個基於 Vue.js 進行快速開發的完整系統。有三個組件:

CLI@vue/cli 全局安裝的 npm 包,提供了終端里的vue命令(如:vue create 、vue serve 、vue ui 等命令)

CLI 服務@vue/cli-service是一個開發環境依賴。構建於 webpack 和 webpack-dev-server 之上(提供 如:servebuild 和 inspect 命令)

CLI 插件:給Vue 項目提供可選功能的 npm 包 (如: Babel/TypeScript 轉譯、ESLint 集成、unit和 e2e測試 等)

全局安裝過舊版本的 vue-cli(1.x 或 2.x)要先卸載它,否則vue -V查看依舊是2.x舊版:

npm uninstall vue-cli -g //或者 yarn global remove vue-cli

vue-cli3.0需要 nodeJs ≥ 8.9 (官方推薦 8.11.0+,你可以使用 nvm 或 nvm-windows在同一台電腦中管理多個 Node 版本)

node -v  //查看版本

安裝@vue/cli(vue-cli 3.0的包名稱由 vue-cli 改成了 @vue/cli

cnpm install -g @vue/cli  //yarn global add @vue/cli
vue -V //查看版本,注意是大寫V

vue-cli  >= 3 和舊版使用了相同的 vue 命令,所以 vue-cli  2 (vue-cli) 被覆蓋了。如果你仍然需要使用舊版本的 vue init 功能,你可以全局安裝一個橋接工具:

npm install -g @vue/cli-init
# `vue init` 的運行效果將會跟 `vue-cli@2.x` 相同
vue init webpack my-project

二、【vue-cli3.0搭建項目】

(1)使用命令行搭建項目:

 1.搭建一個新項目,除最后兩個,其他選項都是你此前保存的預設配置,其中插件安裝選擇列表:方向鍵選擇(按 “空格鍵”選擇/取消選擇,A鍵全選/取消全選)

vue create my-pro-ui //文件名 不支持駝峰(含大寫字母)

# OR //可視化頁面搭建項目
vue ui
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Babel                            //轉碼器,可以將ES6代碼轉為ES5代碼,從而在現有環境執行。                      
 ( ) TypeScript              // TypeScript是一個JavaScript(后綴.js)的超集(后綴.ts)包含並擴展了 JavaScript 的語法,需要被編譯輸出為 JavaScript在瀏覽器運行,目前較少人用
 ( ) Progressive Web App (PWA) Support// 漸進式Web應用程序
 ( ) Router                           // vue-router(vue路由)
 ( ) Vuex                             // vuex(vue的狀態管理模式)
 ( ) CSS Pre-processors               // CSS 預處理器(如:less、sass)
 ( ) Linter / Formatter               // 代碼風格檢查和格式化(如:ESlint)
 ( ) Unit Testing                     // 單元測試(unit tests)
 ( ) E2E Testing                      // e2e(end to end) 測試

2.選擇對應功能的具體工具包:是否使用history router + css預處理器 + ESLint + 2.0升級

手動配置案例:https://www.jianshu.com/p/6307c568832d

①是否使用history router:

Vue-Router 利用了瀏覽器自身的hash 模式history 模式的特性來實現前端路由(通過調用瀏覽器提供的接口)

hash: 瀏覽器url址欄 中的 # 符號(如這個 URL:http://www.abc.com/#/hello,hash 的值為“ #/hello”),hash 不被包括在 HTTP 請求中(對后端完全沒有影響),因此改變 hash 不會重新加載頁面

history:利用了 HTML5 History Interface 中新增的 pushState( ) 和 replaceState( ) 方法(需要特定瀏覽器支持)。單頁客戶端應用,history mode 需要后台配置支持(詳細參見:https://router.vuejs.org/zh/guide/essentials/history-mode.html

② css預處理器:主要為css解決瀏覽器兼容、簡化CSS代碼 等問題(* Sass誕生於2007年,最早也是最成熟的一款CSS預處理器語言。

? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
> SCSS/SASS  //Sass安裝需要Ruby環境,是在服務端處理的,SCSS 是 Sass3新語法(完全兼容 CSS3且繼承Sass功能)
  LESS       //Less最終會通過編譯處理輸出css到瀏覽器,Less 既可以在客戶端上運行,也可在服務端運行 (借助 Node.js)
  Stylus     //Stylus主要用來給Node項目進行CSS預處理支持,Stylus功能上更為強壯,和js聯系更加緊密,可創建健壯的、動態的的CSS。

 ③ ESLint:

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier         //使用較多

④ 何時檢測:

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Lint on save                    // 保存就檢測
 ( ) Lint and fix on commit          // fix和commit時候檢查

⑤ 單元測試 :

? Pick a unit testing solution: (Use arrow keys)
> Mocha + Chai  //mocha靈活,只提供簡單的測試結構,如果需要其他功能需要添加其他庫/插件完成。必須在全局環境中安裝
  Jest          //安裝配置簡單,容易上手。內置Istanbul,可以查看到測試覆蓋率,相較於Mocha:配置簡潔、測試代碼簡潔、易於和babel集成、內置豐富的expect

⑥ 如何存放配置 :

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files // 獨立文件放置
  In package.json // 放package.json里

 ⑦ 是否保存本次配置(之后可以直接使用):

? Save this as a preset for future projects? (Y/n) // y:記錄本次配置,然后需要你起個名; n:不記錄本次配置

(2)使用圖形化界面:

 

 

 

 

安裝完成:你可以在這管理(安裝、刪除)插件、運行並分析你的項目文件

 

搭配vscode編輯器(git+vetur+eslint+代碼提示等插件),面向未來編程!!!

參考:

https://cli.vuejs.org/zh/guide/installation.html

https://my.oschina.net/wangnian/blog/2051369


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM