MacOs使用vue3.0+建立項目

1.安裝node.js和npm

首先安裝node.js（送一個npm），官網下載傻瓜式安裝，能夠查看node和npm的版本，正確出現版本號即安裝成功

node -v
npm -v複製代碼

2.安裝vue腳手架工具（MacOs）

sudo npm install -g @vue/cli複製代碼

注意：3.0+版本的cli工具和2.0+版本的安裝方法不同，mac下注意加上sudo，輸入電腦密碼便可，不然可能會報錯。

安裝完成後能夠查看vue的版本，出現版本號即安裝成功

vue -V  //注意V是大寫
複製代碼

3.建立項目

vue3.0提供了兩種建立項目的方式，一是傳統的命令行建立，二是提供了可視化的建立。

3.1可視化建立

vue ui //可視化建立，會打開瀏覽器，在顯示的頁面中進行建立便可，不作過多敘述複製代碼

3.2命令行建立

1.建立命令 vue create myproject

2.第一項爲默認配置，這裏咱們按下鍵盤方向鍵，選擇第二個 Manually select features。

vue3.0+能夠在建立項目的時候根據本身的須要定製本身的vue項目，這裏我選擇router和CSS預編譯，選擇完成後按下回車。

注意選擇配置項的時候不要按回車，不然會直接到下一步，這裏按方向鍵移動，按空格鍵選擇須要添加的配置。（回車是肯定，空格是選中）

3.3其餘配置項

如圖所示

3.4配置項說明

-Use history mode for router? (Requires proper server setup for index fallback in production) No  

通常選no

-Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less 

預編譯：可根據本身須要選擇sass、less、stylus

-Pick a linter / formatter config: Prettier   

代碼風格

-Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save  

通常選擇lint on save

-Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files  

兩個均可以

-Save this as a preset for future projects? Yes  

是否將此次的配置做爲之後項目的模板（選擇yes後下次建立項目會直接按本次耐模板建立）

-Save preset as: myproject 

保存的本次模板的名字

選擇完配置項後一路回車便可建立項目，建立完成後進入項目目錄，啓動項目便可

注意：啓動命令和2.0+版本不一樣

此時訪問localhost:8080便可看到vue項目了。

第一次寫博文記錄學習過程，如有錯誤，敬請指正。