Vue學習筆記（一） 利用idea 搭建 vue 項目

環境準備工作：

安裝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  就可以看到這個頁面了