安裝腳手架

node 版本要求： > 8.9 。

關于舊版本：如果在這之前已經全局安裝了舊版本的vue-cli(1.x 或 2.x)，那么需要先卸載掉。

卸載舊版本運行：``npm uninstall vue-cli -g`` 或 ``yarn global remove vue-cli``。

安裝@vue/cli：npm install -g @vue/cli 或 yarn global add @vue/cli

安裝之后，可以在命令行中訪問vue命令。

檢查版本是否正確：vue --version。

快速原型開發 （僅用于學習）：（安裝）npm install -g @vue/cli-service-global 或 yarn global add @vue/cli-service-global 。

安裝vscode插件Vetur：用于高亮.vue文件代碼。

利用vue腳手架搭建項目

第一種方法：

使用vue命令搭建：vue create 項目名

注意：項目名不能有大寫字母，否則會報錯。

搭建項目時，需要我們選擇一系列選項：

1、? Please pick a preset: (Use arrow keys) 請選擇一個預設:(使用方向鍵)
> default (babel, eslint) 默認（bable, eslint）
Manually select features 手動選擇功能

• 選擇Manually select features

2、? Check the features needed for your project: (Press <space> to select, <
a> to toggle all, <i> to invert selection) 檢查項目所需的特性:(按<空格>選擇，<
a>切換全部，<i>反轉選擇)。
>(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
( ) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing

• 項目需要什么特性就選擇什么特性

3、? Use history mode for router? (Requires proper server setup for index fa
llback in production) (Y/n) 路由器使用歷史記錄模式?

• Y/n

4、Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow
keys) 配置放在哪里?
> In dedicated config files 專用配置文件
In package.json 在package.json文件

• In package.json

5、? Save this as a preset for future projects? (y/N) 將其保存為未來項目的預置?

• y/N

然后項目就搭建完成了。

怎樣使用呢？

cd 項目名：進入到你創建的項目

npm run serve：開啟服務器，拿到服務地址，在瀏覽器打開服務地址。

第二種方法：

使用 vue ui 命令來搭建

使用 vue ui 命令后，會自動打開一個Vue 項目管理器網頁，然后我們手動搭建項目就行了。

創建 -> 在此創建新項目 -> 輸入項目名 -> 選擇一套預設 -> ? Use history mode for router? (Requires proper server setup for index fa
llback in production) -> 創建項目 -> 保存預設 -> 任務、serve、啟動app 。

小知識

如何刪除預設呢？

找到 .vuerc 文件：C盤 -> 用戶 -> 29215 -> .vuerc

刪除 presets 對象下的字段。

總結

以上是生活随笔為你收集整理的vue脚手架搭建项目_复习之vue脚手架搭建项目的两种方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。