安裝vue-cli腳手架

新版本的Vue CLI 的包名稱由 vue-cli 改爲了 @vue/cli。若是你已經全局安裝了舊版本的 vue-cli (1.x 或 2.x)，你須要先經過 npm uninstall vue-cli -g進行卸載。

Node 版本要求

Vue CLI 須要 Node.js 8.9 或更高版本 (推薦 8.11.0+)。

安裝vue-cli腳手架構建工具

cnpm install -g @vue/cli

檢驗是否安裝成功，獲取到版本號即爲安裝成功

vue -V

 

建立一個基於webpack模板的新項目

vue create hello-world

接下來就是選擇要安裝的特性，根據實際需求自定義選擇

 

 

 選擇完成後回車就能夠開心的掛機了。

---

 

如下是舊版本vue-cli的安裝方法：

1. 安裝vue-cli腳手架構建工具

cnpm install --global vue-cli

檢驗是否安裝成功，獲取到版本號即爲安裝成功。

vue -V

2. 建立一個基於webpack模板的新項目

　　要建立項目，首先咱們要選定目錄，而後再命令行中把目錄轉到選定的目錄。而後執行

vue init webpack my-project

　　這樣就會生成一個初始化的vue項目，或使用

vue init webpack-simple my-project

　　生成一個一個簡單的項目，目錄結構比上一種方式簡單許多。

　　運行初始化命令的時候會讓用戶輸入幾個基本的選項，如項目名稱，描述，做者等信息，若是不想填直接回車默認就好。

　　須要注意的是項目的名稱不能大寫，否則會報錯。

Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代碼？ （Y [ yes ] / N [ no ]）

　　ESLint 是js語法檢查工具，使用的話會嚴格要求js書寫格式，對代碼規範化有着必定的好處，若是閒麻煩也能夠不開。

至此項目已經構建好了，那麼如何把項目運行起來呢？

首先須要進入到咱們項目的文件夾，也就是cd到咱們項目目錄，而後執行

cnpm install

　　若是建立項目的時候沒有報錯，這一步能夠省略。若是報錯了  cd到項目裏面運行

cnpm install

　　執行這一步的目的就是安裝項目的依賴，這時會將package.json文件中配置的依賴所有安裝一遍。

最後運行

npm run dev

這樣咱們的項目就運行起來了。訪問地址：http://localhost:8080