Vue-cli3簡(jiǎn)單使用(圖文步驟)
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 (如果需要可使用)
國內(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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了詳解基于mpvue的小程序markdown適配解決方案，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要為大家介紹了Vue3中的computed和watch源碼解讀分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
element-ui 表格sortable排序手動(dòng)js清除方式
這篇文章主要介紹了element-ui 表格sortable排序手動(dòng)js清除方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
vue3.0實(shí)現(xiàn)移動(dòng)端電子簽名組件
這篇文章主要為大家詳細(xì)介紹了vue3.0實(shí)現(xiàn)移動(dòng)端電子簽名組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
移動(dòng)端Vue2.x Picker的全局調(diào)用實(shí)現(xiàn)
這篇文章主要介紹了移動(dòng)端Vue2.x Picker的全局調(diào)用實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要介紹了vue實(shí)現(xiàn)彈幕功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-10-10
使用vue3實(shí)現(xiàn)一個(gè)人喵交流小程序
Vue3 在經(jīng)過多個(gè)開發(fā)版本的迭代后,終于迎來了它的正式版本,下面這篇文章主要給大家介紹了關(guān)于如何使用vue3實(shí)現(xiàn)一個(gè)人喵交流小程序的相關(guān)資料,需要的朋友可以參考下2021-11-11
vxe-table是一個(gè)全功能的Vue表格,滿足絕大部分對(duì)Table的一切需求,與任意組件庫完美兼容,下面這篇文章主要給大家介紹了關(guān)于Vxe-Table開發(fā)中各種坑以及避坑的相關(guān)資料,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue實(shí)現(xiàn)與安卓、IOS交互的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
如何在 ant 的table中實(shí)現(xiàn)圖片的渲染操作
這篇文章主要介紹了如何在 ant 的table中實(shí)現(xiàn)圖片的渲染操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10