1.首先打開VSCode，打開終端，輸入npm install -g @vue/cli 全局安裝vue腳手架。

全局安裝Vue-cli

2.使用vue create firstdemo 命令創(chuàng)建一個(gè)Vue項(xiàng)目（firstdemo是項(xiàng)目名稱 可以自定義）

選擇預(yù)設(shè)方案

3.輸入命令之后會(huì)出先以下幾個(gè)選項(xiàng)，第一個(gè)是默認(rèn)的預(yù)設(shè)方案，會(huì)安裝Babel和eslint這兩個(gè)模塊，這里我們選擇第二種自定義安裝的方式。

選擇需要安裝的模塊

4.這里我們除了安裝Babel和Linter / Formatter外還安裝了Router和Vuex模塊

5.這個(gè)詢問我們是否使用History模式路由，我們先選擇否。

選擇格式化代碼方式

6.選擇格式化代碼的方式，我習(xí)慣用第三種ESLint+Prettier的模式。

7.詢問我們格式化代碼的時(shí)機(jī)，第一個(gè)是保存文件時(shí)（crtl+S）會(huì)自動(dòng)格式化代碼，第二種是Git commit?提交代碼時(shí)才會(huì)格式化代碼，為了書寫代碼規(guī)范，我們選擇第一種。

8.詢問我們把配置文件存放位置，第一個(gè)是獨(dú)立文件存放，第二個(gè)是存到package.json中，這里我們選擇第二種。

9.詢問我們的是否保存當(dāng)前配置作為預(yù)設(shè)，選擇y。然后會(huì)讓我們給自己的預(yù)設(shè)取一個(gè)名字，取一個(gè)自己喜歡的名字點(diǎn)擊回車，開始創(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)后訪問http://localhost:8080/就可以看到我們的vue腳手架項(xiàng)目了

效果