一、搭建vue環(huán)境

安裝Nodejs 官網(wǎng)下載Nodejs，如果希望穩(wěn)定的開發(fā)環(huán)境則下LTS(Long Time Support)長期支持版，穩(wěn)定。

點(diǎn)我進(jìn)入node官網(wǎng)

安裝好后cmd輸入node -v查詢是否安裝成功，如下出現(xiàn)版本號即為成功。

二、Vue腳手架工具

全局安裝vue-cli，命令行中輸入：

npm install --g vue-cli

國內(nèi)直接使用 npm 的官方鏡像是非常慢的，這里推薦使用淘寶鏡像或者yarn

淘寶鏡像的安裝如下

npm install -g cnpm --registry=https://registry.npm.taobao.org
//安裝成功后 使用 cnpm i xxx 代替 npm install xxx

三、創(chuàng)建項(xiàng)目

vue create 項(xiàng)目名

vue create  code    //其中code為你的項(xiàng)目目錄名稱   (enter鍵確認(rèn),并進(jìn)入下一步)

最開始回車會(huì)出現(xiàn)下面兩項(xiàng)

Default (Vue 3) ([Vue 3] babel, eslint)(默認(rèn)配置 提供babel或者eslint支持)
Manually select features(手動(dòng)選擇項(xiàng)目特性)

我們可以通過上下鍵，空格來選擇我們需要的，一般我們都會(huì)選擇手動(dòng)配置

四、選擇manually select (enter鍵確認(rèn),并進(jìn)入下一步)

對于每一項(xiàng)的功能，王同學(xué)做一個(gè)簡單的描述：

• Babel 主要是對es6語法轉(zhuǎn)換成兼容的js （選上）
• TypeScript 支持使用TypeScript語法來編寫代碼
• Progressive Web App (PWA) Support [把網(wǎng)頁做的更像原生app]
• Router 支持vue路由配置插件（一般都會(huì)選擇）
• Vuex 支持vue程序狀態(tài)管理模式 (一般都會(huì)選擇)
• CSS Pre-processors 支持css預(yù)處理器 （一般都會(huì)選擇）
• Linter / Formatter 支持代碼風(fēng)格檢查和格式化 （選上）
• Unit Testing 單元測試
• E2E Testing E2E測試
  

常見的項(xiàng)目選擇如下

五、選擇完成之后回車 這里我們選擇3.x的

六、完成之后回車 出現(xiàn)以下界面

這里的意思是問你本次項(xiàng)目是否采用history模式，如果選擇Y,需要后臺配置具體看vueRouter官網(wǎng)解釋，這里我門選擇 n

七、回車 出現(xiàn)以下界面

這里的意思是問你選擇哪一種CSS預(yù)處理語言，我的項(xiàng)目中一般使用的是SCSS我選擇第一個(gè)

八、回車出現(xiàn)以下界面

這里的意思是選擇一種格式化代碼方式：我一般選擇 ESLint + Prettier

九、回車出現(xiàn)以下界面

這里的意思是問你什么時(shí)候進(jìn)行代碼規(guī)則檢測，我一般會(huì)選擇保存就檢測，也就是Lint on Save

十、回車出現(xiàn)以下界面

這里的意思是將Babel,PostCSS,ESLint這些配置文件放哪，通常我們會(huì)選擇放到獨(dú)立位置，讓package.json文件干凈點(diǎn)，所以選擇第一個(gè)

十一、回車出現(xiàn)以下界面

這里是問你是否記錄這次配置選擇，選擇之后會(huì)讓你為這次配置起一個(gè)名字，這樣下次可以直接快速配置選擇，最后回車后就會(huì)初始化項(xiàng)目了，完成后如下圖：

十二、根據(jù)提示，啟動(dòng)項(xiàng)目

根據(jù)指令提示 我們先執(zhí)行cd code，然后執(zhí)行npm run serve

十三、當(dāng)我們需要自定義webpack相關(guān)配置的時(shí)候需要在項(xiàng)目根目錄中創(chuàng)建vue.config.js文件，它會(huì)被@vue/cli-server自動(dòng)加載，相關(guān)配置內(nèi)容官網(wǎng)將的很詳細(xì)，大家可以自己去官網(wǎng)看 好了，今天的內(nèi)容就到這里了，本期結(jié)束 我們下期見?。。?/p>

到此這篇關(guān)于五分鐘教你使用vue-cli3創(chuàng)建項(xiàng)目(新手入門)的文章就介紹到這了,更多相關(guān)vue-cli3創(chuàng)建項(xiàng)目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！