前端——Vue CLI 3.x搭建Vue項目

一、Node安裝

windows
　1. Node.js （>=8.9, 推薦8.11.0+）
　　Node官網下載 .msi 文件，按步驟下載安裝即可。
　　安裝完之后在cmd中輸入 node -v，若顯示版本號，則說明安裝成功。
　2. Git（命令行終端）
　　Git官網下載安裝即可。

 

Linux

apt-get install nodejs
node -v
apt-get install npm
npm -v

　　

npm命令
1、得到原本的鏡像地址

npm get registry

　　

2、設置成淘寶

npm config set registry http://registry.npm.taobao.org/

 

3、換成原來的　　

npm config set registry https://registry.npmjs.org/

　　

二、vue-cli安裝、更新

如果全局安裝過舊版本的 vue-cli(1.x 或 2.x)要先卸載它，否則跳過此步。

npm uninstall vue-cli -g

　　

操作如下：

 

 

 

可以看到我之前的版本是2.9.6，卸載成功后，vue命令便不存在了。

ps：如果有npm WARN警告，可能是coffee-script的某個依賴包改名了（coffee-script本身已經淘汰了）。

下面開始全局安裝 @vue/cli（Vue CLI 3的包名稱由vue-cli改成了@vue/cli）：

npm install -g @vue/cli

　　

更新：

npm update @vue/cli

　　

查看安裝成功否（有版本號就是成功，V大寫）

vue -V

　　

 

三、vue-cli搭建vue項目

執行如下命令即可（注意該命令跟vue-cli2.x不同）。

vue create <Project Name>  // 文件名 不支持駝峰（含大寫字母）

　　

但如果是在windows環境下直接使用 Git Bash，交互提示符並不工作，必須通過如下命令來創建項目：

winpty vue.cmd create my-project

　　

具體操作如下：

1. 首先，會提示你選擇一個preset（預設）：
2. 如果之前配置保存過，那么有preset-config選項，可以直接用。
3. 如果沒有配置保存過，則只有兩個選項：
4. default（babel，eslint）：默認設置（直接enter）非常適合快速創建一個新項目的原型，沒有帶任何輔助功能的npm包。
5. Manually select features：手動配置（按方向鍵 ↓）是我們所需要的面向生產的項目，提供可選功能的npm包。

 

我們選擇手動配置，根據你需要用方向鍵選擇（按“空格鍵”選擇/取消選擇，A鍵全選/取消全選）對應功能。

為了方便稍后跟用vue-cli2.x創建的項目結構作對比，我們這邊僅添加Router而不添加Vuex。

 

 

簡單介紹一下各個參數含義：

? Check the features needed for your project:
>( ) 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） 測試

　　

選擇完后直接enter，然后會提示你選擇對應功能的具體工具包，選擇自己擅長或者使用廣泛的（方便遇到問題時百度），簡介如下：

① 是否使用history router：

Vue-Router利用了瀏覽器自身的hash模式和history模式的特性來實現前端路由（通過調用瀏覽器提供的接口）。
詳情見Vue Router - HTML5 History 模式。

 

② 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
提供一個插件化的javascript代碼檢測工具。

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

　　

⑥ 如何存放配置

 

 

bash? 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：不記錄本次配置

　　

搭建完成后，依次執行 cd my-project 和 npm run serve 即可訪問vue默認的demo頁面。

 

 

參考博客：https://www.wenyuanblog.com/blogs/vue-cli3x-to-create-vue-project.html