用腳手架搭建一個 vue 專案
阿新 • • 發佈：2021-02-28
# 一、需要安裝 node 環境
> 下載地址: https://nodejs.org/en/
> 中文網: http://nodejs.cn/
#### 安裝後為方便國內使用，可以把 npm 換成 taobao 的 cnpm (速度快)
```bash
npm install -g cnpm --registry=https://registry.npm.taobao.org
```
檢查是否安裝成功,檢視版本號
# 二、全域性安裝 vue 腳手架
全域性安裝可能需要管理員許可權( Windows 以管理員身份執行; Linux 加 sudo )
```bash
npm install -g @vue/cli
或者用 cnpm
cnpm install -g @vue/cli
簡寫
cnpm i -g @vue/cli
```
#### 安裝成功後可檢視版本
```bash
vue -V (大寫V)
```
# 三、建立專案
為方便編輯,我一般都在 `vscode` 裡操作
## 1.比如建立一個叫 project 的專案
```bash
vue create project
```
#### 如果安裝了 cnpm 就會詢問是否使用淘寶映象(cnpm)
都可以,只是影響網速快慢,我裝了 `cnpm`,這裡我填 `Y`
## 2.選擇配置方式
> #### 說明:
>
> - `Default (babel,eslint)`: 預設配置
> - `Manually select features`: 手動選擇配置
鍵盤上下就可以選擇,選 `Manually select features` (最下面那個),俺不用預設配置
## 3.手動選擇專案所需要的包
> #### 說明:
>
> - `Babel`: Babel 編譯,將 ES6 編譯成 ES5,進行相容
> - `TypeScript`: 給 JavaScript 新增特性的語言擴充套件
> - `Progressive Web App (PWA) Support`: 讓網頁漸進式變成 App
> - `Router`: Vue 路由
> - `Vuex`: Vue 狀態管理
> - `CSS Pre-processors`: CSS 預編譯器 (包括 SCSS/Sass、Less、Stylus)
> - `Linter / Formatter`: 程式碼檢測和格式化
> - `Unit Testing`: 單元測試
> - `E2E Testing`: 端到端測試
>
> ##### 根據需求進行勾選,上下鍵選擇,空格是取消或選中,選完最後回車
#### 如圖:
## 4.選擇版本
## 5.路由是否採用 history 模式
選啥都可以,之後可以改
## 6.選擇 CSS 編譯方法
按需選擇,我選的 `Less`
## 7.選擇程式碼規範
我選的 `Standard config`
> #### 說明:
>
> - `eslint with ...` : 只進行報錯提醒;
> - `eslint + A ...` : 不嚴謹模式;
> - `eslint + S ...` : 正常模式;
> - `eslint + P ...` : 嚴格模式;
## 8.選擇合適程式碼檢驗規範
選 `lint on save`,也就是報存時檢驗
## 9.選擇放置配置的檔案
我選的第一個,放到一個獨立檔案裡
## 10.是否儲存配置為以後使用
先不儲存 (`N`)
## 11.安裝完成
### 執行專案
其實安裝完成後有提示
```bash
cd project (進入專案根目錄)
npm run serve
```
會在本地 `8000` 埠執行
#### 如圖
#