Vue-cli3簡單使用(圖文步驟)

Vue-cli3.X創建項目

1.環境要求

安裝Vue-cli3.x的前置條件：Node.js

以Windows為例安裝Node.js,百度 “Node.js官網” 或”Node.js中文網”均可 ,如無特殊要求 下載安裝 LTS版（長期支持版，該版本已滿足Vue CLI官網所需要求版本要求）

一路Next即可，一般無需更改默認安裝設置

安裝完畢在開始菜單內即可找到一個名為 Node.js 的文件夾如下圖

注：Node.js內可直接運行js基礎代碼（非DOM等相關代碼）**

而我們需要使用的是 Node.js command prompt

2.Vue-CLI安裝：

官方命令 npm install -g @vue/cli

注：@不能少，少了@安裝的不是3.x版本而是1.x、2.x版本，若已經安裝了舊版本則需卸載舊版本然后再安裝新版本

舊版本卸載命令 npm uninstall vue-cli -g

補充：vue-cli 3.x 卸載命令 npm uninstall @vue/cli -g (如果需要可使用)

國內下載速度比較慢

查看npm當前下載鏡像，命令為：npm get registry

結果> https://registry.npmjs.org/

如果嫌棄下載慢可以切換為淘寶鏡像或者直接安裝cnpm并更換淘寶鏡像，命令如下：

npm config set registry http://registry.npm.taobao.org/
npm install -g cnpm --registry=https://registry.npm.taobao.org

等待安裝完畢

2.1使用腳手架創建項目

建議先考慮項目文件夾儲存的位置并進入相關位置，以桌面為例

cd desktop

如果無需更改位置，請跳過；如果需返回上級目錄 cd.. 即可，其他cmd命令可自行百度

創建項目的兩種方式：

一、直接命令行創建

創建項目命令： vue create 項目名 自己起個名字即可，但請注意不能有大寫字母，否則報錯：Warning: name can no longer contain capital letters

vue create learn √

接下來會問你選擇那種配置（會顯示所有保存過的配置，首次使用只會顯示 default（babel,eslint） 以及 Manually select features）

可選自己之前創建過的或選擇官方默認配置或者手動選擇)

選擇Manually select features 將出現以下內容

方向鍵 控制上下 空格選擇 A 全選 I反轉選擇

選擇好大體的功能/插件之后 回車 接著會讓你選擇細分的特性

比如 Linter/Formatter 下：

在保存時進行代碼檢測

Babel、PostCSS、ESLint等配置文件存放位置，選擇單獨保存在各自的配置文件中

Pick a CSS pre-processor(css預處理語言)下 有SCSS/SASS、LASS、Stylus

還有TS、PWA、Roter（vue 路由管理；SPA必帶）、Vuex（vue狀態管理）、測試（Unit Testing、E2E Testing）等等，均可按需選擇

最后會詢問你 是否保存為未來項目的預設配置 如果保存需要輸入名稱

等待項目創建...

項目創建好后按提示進入項目，并啟動項目

cd learn 進入后 npm run serve

這兩個地址均可訪問，第二個地址也并不能對外訪問，應該是沒做好端口映射，那這個地址用來干嘛的？

二、通過GUI創建

在下載好vue-cli3.x后，進入項目存儲位置后 輸入 vue ui，會在瀏覽器內打開vue項目儀表盤（非初次使用界面）

在使用過GUI創建過項目后，再次打開就會直接進入舊項目管理界面，如上

如果需要再新建一個項目，可在 左上角下拉菜單內選擇 ”Vue項目管理器“返回首頁

創建——》在此創建新項目——》輸入項目文件夾名（沒有git建議關閉）——》下一步

可選自己創建過的配置或者官方配置或者手動配置

手動配置如下圖所示， 按需選擇，相關介紹之前提到過了

注：有下拉框的得先選擇否則不能 下一步

最后點擊創建并等待

最終和CMD截圖如下

如果想在瀏覽器內啟動的話 左側菜單欄——》任務——》任務面板——》serve——》運行——》右側 啟動app (從左往右點擊紅色即可)

也可命令行啟動，命令與之前所述相同

至此結束，以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。