環境準備工作：

安裝node.js 環境  -- 略

安裝vue-li  全域性安裝vue-cli，在命令列中執行npm install -g vue-cli

idea準備工作：

安裝vue.js

File -> Settings -> Plugins -> Browse respositoties 中搜索vue.js  安裝

HTML 新增 *.vue型別

File -> Settings -> Editor -> File Types -> HTML  選中   點下方的+  新增*.vue字尾

設定js

File -> Settings -> Language & Frameworks -> JavaScript

選擇ECMAScript 6   和勾選Prefer Strict mode

建立vue模版（可添可不添）

File -> Settings -> Editor -> File and Code Templates -> +

<template>
  <div>
      {{msg}}
  </div>
</template>
<style></style>

<script>

export default{
  data () {
    return {msg: 'vue模板頁'}
  }
}

</script>
 

準備工作做完了，接下來建立vue專案

點選File - open  選擇一個想要建立vue專案的資料夾

開啟下發的 Terminal 可以看到我當前的目錄

輸入vue init webpack project-name，回車 （project-name為專案名）

？Project name ---- 專案名稱，直接回車即可；

？Project description ---- 專案描述，按需填寫。無需填寫可以直接回車；

？Author ---- 作者

？Vue build ---- 構建模式，一般預設第一個；

？Install vue-router? ---- 是否安裝vue-router。選Y。後邊構建專案會用到。

？Use ESLint to lint yout code? ---- 格式校驗，按需；

？Set up unit tests ---- 測試相關，按需；

？Setup e2e tests with Nightwatch? ---- 測試相關，按需；

？Should we run ‘npm install’ for you after the project has been created? ---- 按需，這裡我選Yes, use NPM。如果選No，後續自己在目標

目錄下執行npm install即可。

這樣構建出來的專案，可以直接執行。進入專案所在目錄，執行npm run dev，執行完看到以下提示：

輸入http://localhost:8080  就可以看到這個頁面了