Vue-cli3.X創(chuàng)建項(xiàng)目

1.環(huán)境要求

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

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

一路Next即可，一般無需更改默認(rèn)安裝設(shè)置

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

注：Node.js內(nèi)可直接運(yùn)行js基礎(chǔ)代碼（非DOM等相關(guān)代碼）**

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

2.Vue-CLI安裝：

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

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

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

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

國(guó)內(nèi)下載速度比較慢

查看npm當(dāng)前下載鏡像，命令為：npm get registry

結(jié)果> 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使用腳手架創(chuàng)建項(xiàng)目

建議先考慮項(xiàng)目文件夾儲(chǔ)存的位置并進(jìn)入相關(guān)位置，以桌面為例

cd desktop

如果無需更改位置，請(qǐng)?zhí)^；如果需返回上級(jí)目錄 cd.. 即可，其他cmd命令可自行百度

創(chuàng)建項(xiàng)目的兩種方式：

一、直接命令行創(chuàng)建

創(chuàng)建項(xiàng)目命令： vue create 項(xiàng)目名 自己起個(gè)名字即可，但請(qǐng)注意不能有大寫字母，否則報(bào)錯(cuò)：Warning: name can no longer contain capital letters

vue create learn √

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

可選自己之前創(chuàng)建過的或選擇官方默認(rèn)配置或者手動(dòng)選擇)

選擇Manually select features 將出現(xiàn)以下內(nèi)容

方向鍵 控制上下 空格選擇 A 全選 I反轉(zhuǎn)選擇

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

比如 Linter/Formatter 下：

在保存時(shí)進(jìn)行代碼檢測(cè)

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

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

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

最后會(huì)詢問你 是否保存為未來項(xiàng)目的預(yù)設(shè)配置 如果保存需要輸入名稱

等待項(xiàng)目創(chuàng)建...

項(xiàng)目創(chuàng)建好后按提示進(jìn)入項(xiàng)目，并啟動(dòng)項(xiàng)目

cd learn 進(jìn)入后 npm run serve

這兩個(gè)地址均可訪問，第二個(gè)地址也并不能對(duì)外訪問，應(yīng)該是沒做好端口映射，那這個(gè)地址用來干嘛的？

二、通過GUI創(chuàng)建

在下載好vue-cli3.x后，進(jìn)入項(xiàng)目存儲(chǔ)位置后 輸入 vue ui，會(huì)在瀏覽器內(nèi)打開vue項(xiàng)目?jī)x表盤（非初次使用界面）

在使用過GUI創(chuàng)建過項(xiàng)目后，再次打開就會(huì)直接進(jìn)入舊項(xiàng)目管理界面，如上

如果需要再新建一個(gè)項(xiàng)目，可在 左上角下拉菜單內(nèi)選擇 ”Vue項(xiàng)目管理器“返回首頁

創(chuàng)建——》在此創(chuàng)建新項(xiàng)目——》輸入項(xiàng)目文件夾名（沒有g(shù)it建議關(guān)閉）——》下一步

可選自己創(chuàng)建過的配置或者官方配置或者手動(dòng)配置

手動(dòng)配置如下圖所示， 按需選擇，相關(guān)介紹之前提到過了

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

最后點(diǎn)擊創(chuàng)建并等待

最終和CMD截圖如下

如果想在瀏覽器內(nèi)啟動(dòng)的話 左側(cè)菜單欄——》任務(wù)——》任務(wù)面板——》serve——》運(yùn)行——》右側(cè) 啟動(dòng)app (從左往右點(diǎn)擊紅色即可)

也可命令行啟動(dòng)，命令與之前所述相同

至此結(jié)束，以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論