使用Vue-cli 4.x搭建Vue項目

安裝Vue-Cli 4.x

Node 版本要求：Vue CLI 需要 Node.js 8.9 或更高版本 (推薦 8.11.0+)

npm install -g @vue/cli
# 或者
yarn global add @vue/cli

查看版本

vue --version

如需升級全局的 Vue CLI 包，請運行：

npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli

創建項目

創建命令

vue create vue-test

選擇配置方式

一般剛剛安裝都沒有第一個，那個是我自己配置后保存的，這里選擇 Manually select features

  Default ([Vue 2] babel, eslint)  # Vue 2 默認配置
  Default (Vue 3 Preview) ([Vue 3] babel, eslint) # Vue 3 默認配置
  Manually select features  # 手動選擇配置

進行手動配置

Choose Vue version  #選擇Vue版本
Babel： #Babel編譯
TypeScript：#TypeScript支持
Progressive Web App (PWA) Support： #PWA支持
Router：# Vue路由
Vuex： #Vue狀態管理
CSS Pre-processors： #CSS預編譯器（包括：SCSS/Sass、Less、Stylus）
Linter / Formatter： #代碼檢測和格式化
Unit Testing： #單元測試
E2E Testing： #端到端測試

這里我選擇了以上的選項，使用上下鍵進行切換，空格鍵進行選中，選擇完成之后按回車進入下一步

選擇Vue的版本

我使用的時候Vue3還是測試版，所以我這里選擇Vue2.x

選擇路由模式

路由模式在后面會說到，這里直接選擇y

選擇CSS預編譯器

關於SASS和LESS的區別大家可以去百度一下，相對來說LESS更簡單一些，SASS更強大一些。我這里選擇LESS。

選擇ESLint編碼規范

ESLint最初是由Nicholas C. Zakas 於2013年6月創建的開源項目。它的目標是提供一個插件化的javascript代碼檢測工具。

我在這里選擇ESLint的標准版模式

選擇代碼檢查鈎子

Lint on save： #在保存時進行檢測
Lint and fix on commit： #在fix和commit是進行檢查

選擇單元測試依賴

Jest 是功能最全的測試運行器。它所需的配置是最少的。所以這里選擇Jest

選擇以上配置的保存位置

為了配置的清晰條例，這里選擇``In dedicated config files`

In dedicated config files： #單獨保存在各自的配置文件中
In package.json： #保存在package.json文件中

是否記錄這次配置，以便下次使用

如果你要經常使用這套配置方案的話，可以選擇Y，進行保存。如果只是測試可以選擇N

確定以后回車，等待vue-cli初始化

初始化完成之后，進入目錄，就可以運行項目。

 $ cd vue-demo-01
 $ npm run serve

訪問http://localhost:8080/