Vue 新手搭建項目 以及 基於 Vue cli 項目最佳實踐（一）環境篇

新手接觸 Vue 都有一個認識的過程，下面我爲你們寫出，我本身寫項目的思路，一次次進步，修改造成的項目模板，爲本身所在初創公司創建一些前端基礎，僅供參考

1、環境

1. node 必須安裝，無可厚非

nodejs.org/zh-cn/

2. 腳手架安裝 (vue-cli3)

cli.vuejs.org/

npm install -g @vue/cli
# OR
yarn global add @vue/cli
複製代碼

2、建立項目

這裏我認爲讀者已經瞭解 vue-cli 相關內容，這時咱們打開命令行工具

操做提示：（上下箭頭移動，空格選擇，回車確認）

1. 建立一個名爲 first-project 的項目

$ vue create first-project

2. 自動或手動配置

第一步完成回車以後，會彈出下面內容

忽略其餘，第一次用的人會有兩個選擇如框中所示 咱們選擇第二個 Manually select features

3. 項目配置選擇

咱們選擇經常使用的配置，以下

◉ Babel
 ◯ TypeScript           (支持 TypeScript 書寫源碼)
 ◯ Progressive Web App (PWA) Support    (Support PWA 支持)
 ◉ Router               (支持路由 vue-router)
 ◉ Vuex                 (支持狀態管理 vuex)
 ◉ CSS Pre-processors   (支持 CSS 預處理器)
 ◉ Linter / Formatter   (支持代碼風格檢查和格式化)
 ◯ Unit Testing         (支持單元測試)
 ◯ E2E Testing          (支持 E2E 測試)
複製代碼

4. 詳細配置

1. 路由模式不選擇 history
2. css 預處理器選擇 less
3. ESlint 檢查風格 Standard
4. 保存的時候檢查 ESlint
5. babel 配置項都放入 package.json
6. 是否保存爲預設項目

接下去等待項目配置完成就行了

按照圖中，直接 npm run serve 就能夠運行項目了

下一章，將咱們的項目結構改變，讓咱們的開發更科學，思路更清晰