Vue CLI 3.x開發環境搭建

1.介紹

Vue CLI目前已經發展到了3.0，本文將介紹如何經過Vue Cli 3.0搭建Vue項目的開發環境。若是你還未接觸過Vue Cli，請先配置好Node.js的開發環境，本文默認你已經使用過了Vue Cli 2.0。

2.安裝

打開CMD（命令行工具），輸入npm install -g @vue/cli，安裝vue cli 3.0，經過vue --version檢查vue cli的版本。

3.建立項目

經過vue create hello-world，能夠建立一個名爲hello-world的vue項目；

你會被提示選取一個 preset。你能夠選默認的包含了基本的 Babel + ESLint 設置的 preset，也能夠選「手動選擇特性」來選取須要的特性。

選擇完項目的基本配置後，便可生成項目。

項目文件夾

4.運行項目

經過npm run serve，就能夠運行vue項目

UI界面

5.GUI管理項目

vue cli 3.0新增了圖形界面的項目管理工具，經過在cmd中輸入vue ui指令就能夠在瀏覽器打開這個項目管理界面

UI界面

6.關於vue cli 2.0

Vue CLI >= 3 和舊版使用了相同的 vue 命令，因此 Vue CLI 2 (vue-cli) 被覆蓋了。若是你仍然須要使用舊版本的 vue init 功能，你能夠全局安裝一個橋接工具：

npm install -g @vue/cli-init

# `vue init` 的運行效果將會跟 `vue-cli@2.x` 相同

vue init webpack my-project