1.首先打開(kāi)VSCode寝姿,打開(kāi)終端拾酝,輸入npm install -g @vue/cli 全局安裝vue腳手架。
2.使用vue create firstdemo 命令創(chuàng)建一個(gè)Vue項(xiàng)目(firstdemo是項(xiàng)目名稱 可以自定義)
3.輸入命令之后會(huì)出先以下幾個(gè)選項(xiàng),第一個(gè)是默認(rèn)的預(yù)設(shè)方案挨下,會(huì)安裝Babel和eslint這兩個(gè)模塊,這里我們選擇第二種自定義安裝的方式脐湾。
4.這里我們除了安裝Babel和Linter / Formatter外還安裝了Router和Vuex模塊
5.這個(gè)詢問(wèn)我們是否使用History模式路由臭笆,我們先選擇否。
6.選擇格式化代碼的方式秤掌,我習(xí)慣用第三種ESLint+Prettier的模式愁铺。
7.詢問(wèn)我們格式化代碼的時(shí)機(jī),第一個(gè)是保存文件時(shí)(crtl+S)會(huì)自動(dòng)格式化代碼闻鉴,第二種是Git commit?提交代碼時(shí)才會(huì)格式化代碼茵乱,為了書(shū)寫代碼規(guī)范,我們選擇第一種孟岛。
8.詢問(wèn)我們把配置文件存放位置瓶竭,第一個(gè)是獨(dú)立文件存放,第二個(gè)是存到package.json中渠羞,這里我們選擇第二種斤贰。
9.詢問(wèn)我們的是否保存當(dāng)前配置作為預(yù)設(shè),選擇y次询。然后會(huì)讓我們給自己的預(yù)設(shè)取一個(gè)名字荧恍,取一個(gè)自己喜歡的名字點(diǎn)擊回車,開(kāi)始創(chuàng)建項(xiàng)目啦屯吊。由于要安裝很多依賴所以會(huì)比較慢送巡,靜靜等待吧摹菠。
10.創(chuàng)建完成?先輸入cd?firstdemo跳轉(zhuǎn)到我們的項(xiàng)目文件夾中,然后npm?run?serve?啟動(dòng)我們的項(xiàng)目授艰。
11項(xiàng)目啟動(dòng)后訪問(wèn)http://localhost:8080/就可以看到我們的vue腳手架項(xiàng)目了