一、【准備工作】
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 之上(提供 如:serve
、build
和 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+代碼提示等插件),面向未來編程!!!
參考: