1.安裝vue-cli腳手架

$ npm install -g vue-cli
# 全域性安裝vue腳手架
# 若npm報錯，可使用cnpm
$ cnpm install -g vue-cli

# 安裝完成，檢視版本號
$ vue --version

2.vue腳手架建立webpack專案

$ vue init webpack demo
? Project name (demo)                      # 專案名稱 預設直接回車
? Project description (A Vue.js project)   # 專案簡介 預設直接回車
? Author (Author_Name <
 
[email protected]>)  # 作者資訊 預設直接回車
? Install vue-router? (Y/n) Y              # 安裝vue-router路由元件
? Use ESLint to lint your code? (Y/n) n    # 安裝eslint程式碼規範檢查元件
                                           # 我是關閉的 自己配eslint vue官方的程式碼規範寫不慣
                                           # 如何用sublime配置eslint 我之後會專門寫一篇 IDE應該都有自帶eslint
 

# 後面的配置可直接回車 預設
? Set up unit tests (Y/n) Y
? Setup e2e tests with Nightwatch? (Y/n) Y
? Should we run `npm install` for you after the project has been created? (recommended) npm

    vue-cli · Generated "demo".
    
To get started: # 教你怎麼開啟專案
  cd demo
  npm install
  npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack

 

注意

有時候照著流程啟動專案以後，會各種報錯無法啟動。這個時候，一般是在建立專案的時候，網路問題導致依賴包沒安裝完全。只要把專案裡的node_modules資料夾刪掉，必須刪掉，因為就算依賴包缺少了部分檔案，但它任然是已經下載好了，不刪掉的話，npm會自動檢測跳過安裝。然後用cnpm install重新安裝一下就行了

至此，vue腳手架就算安裝好了，專案也正常搭建。