筆記目錄
- 一、搭建開發環境
-
- 1、Vue2.0 推薦開發環境
- 2、安裝node
- 3、安裝cnpm
- 4、安裝 webpack
- 5、安裝vue-cli
- 二、建構項目
-
- 1、建立項目
- 2、安裝依賴
- 三、嘗試運作
-
- 1、cmd指令運作
- 2、idea導入項目
- 3、idea運作
一、搭建開發環境
1、Vue2.0 推薦開發環境
2、安裝node
Node.js官網：
進入Node.js官網，選擇下載下傳并安裝Node.js。安裝過程隻需要點選“下一步”即可，如下圖，非常簡單。
Node.js也有中文官網
驗證Node.js是否安裝好，在windows下，win+r召喚出運作視窗，輸入cmd打開指令行視窗。
輸入node -v 即可得到對應的Node.js版本;
輸入 node 指令，進入node.js互動模式；
輸入console.log(“Hello,World”); 測試安裝
npm包管理器是內建在Node.js中了，是以在安裝Node.js的時候就已經自帶了npm。
輸入npm -v 可得到npm的版本。
3、安裝cnpm
由于資源的限制，安裝npm依賴包的時候經常失敗，建議使用npm的國内鏡像cnpm 指令行工具代替預設的npm。
npm 國内鏡像： https://npm.taobao.org/
在指令行中輸入以下内容等待安裝
npm install -g cnpm --registry=https://registry.npm.taobao.org
4、安裝 webpack
在指令行中運作以下指令然後等待安裝。
npm install webpack -g
5、安裝vue-cli
在指令行中運作以下指令然後等待安裝
cnpm install -g vue-cli
二、建構項目
1、建立項目
在這裡将vue項目建在指定檔案夾下，比如D盤的vueProjiects檔案夾，利用指令進入此目錄。在cmd中輸入盤符D:回車即可進入D盤：
輸入指令 cd vueProjects跳到此目錄下：
在此目錄下建立一個基于 webpack 模闆的新項目,即在cmd中輸入以下指令：
vue init webpack my-vue-project // my-vue-project就是建立項目的名稱
vue init webpack my-vue-project 意思是初始化一個項目，利用的是webpack打包和壓縮，此項目命名為my-vue-project。
這樣，my-vue-project檔案夾就自動生成剛剛在指定的目錄中。
在輸入之後會出現許多配置項，一般情況下沒有特别設定，一路enter就可以了。
但是，其中的ESLint推薦不使用(運作的時候會檢查代碼規範，規範什麼的太麻煩，畢竟是小demo)，ESlint是可以配置規範的，在多人協作開發的過程中，代碼的規範非常的重要。有一套良好的代碼規範，對于項目的開發和維護都很友好。我這裡不用，是因為配置麻煩，以及運作的時候總報錯很影響心情。
? Project name my-vue-project //項目名，預設就是上面設定的my-vue-project
? Project description A Vue.js project // 項目描述，會在README.md檔案上生成輸入的内容，回車
? Author _**** <****@**.com> // 項目作者，如果有git，就是讀取git的User資訊
? Vue build standalone // 建構方式，回車，選第一個選項recommended for most users（被推薦給大多數使用者)
? install vue-router? Yes // 安裝vue的路由插件，回車
? Use ESLint to lint your code? Yes // 是否使用ESlint檢測你的代碼，預設是
// ESLint推薦不使用，(運作的時候會檢查代碼規範，規範什麼的太麻煩，畢竟是小demo)，ESlint是可以配置規範的，在多人協作開發的過程中，代碼的規範非常的重要。有一套良好的代碼規範，對于項目的開發和維護都很友好。這裡可以不用，是因為配置麻煩，以及運作的時候總報錯很影響心情。
? Pick an ESLint preset Standard // 選這個一個ESlint類型，回車，Standard是js的标準風格
? Setup unit tests with Karma + Mocha? Yes // 使用單元測試工具，回車，karma和mocha 預設
? Pick a test runner Jest // 選擇一個單元測試運作器，回車預設
? Setup e2e tests with Nightwatch? Yes // 使用e2e測試架構，回車 NightWatch 預設
? Should we run 'npm install' for you after the project has been created? yes,use npm // 回車， 項目建立後是否要為你運作“npm install”?這裡選擇包管理工具
出現下面幾句表示建立好了。
打開my-vue-project檔案夾，項目檔案如下：
| 目錄/檔案 | 說明 |
|---|---|
| build | 項目建構(webpack)相關代碼 |
| config | 配置目錄，包括端口号等。我們初學可以使用預設的。 |
| node_modules | npm 加載的項目依賴子產品 |
| src | 源碼存放檔案夾目錄。 assets: 放置一些圖檔，如logo等。 components: 目錄裡面放了一個元件檔案，可以不用。 App.vue: 項目入口檔案，我們也可以直接将元件寫這裡，而不使用 components 目錄。 main.js: 項目的核心檔案。 |
| static | 靜态資源目錄，如圖檔、字型等。 |
| test | 初始測試目錄，可删除，展開可以看到單元測試和e2e測試兩個目錄 |
| .xxxx檔案 | 這些是一些配置檔案，包括文法配置，git配置等。 |
| index.html | 首頁入口檔案，單頁應用的html檔案，可以看成是一個視窗(window)。 |
| package.json | 項目配置檔案。配置項目資訊，需要安裝的子產品之類 |
| README.md | 項目的說明文檔，markdown 格式 |
2、安裝依賴
在啟動之前還需要安裝我們的依賴子產品，也就是package.json裡面的子產品，在cmd中，注意需要使用指令先定位到my-vue-project目錄下，然後輸入指令cnpm install安裝項目所需的依賴包資源
cnpm install
( cnpm install 最好不要從國内鏡像cnpm安裝，會導緻後面可能缺失很多依賴庫）
可以看到my-vue-project檔案夾下多了一個node_modules檔案
三、嘗試運作
1、cmd指令運作
使用指令npm run dev 運作項目
npm run dev
項目運作成功後浏覽器會自動打開localhost:8080呈現以下頁面：
2、idea導入項目
已有項目選擇：File -> New -> Project from Existing Sources…
選擇之前建構好的項目：my-vue 選擇之後，直接點選 ok 。
選擇項目類型：選擇之後，直接點選 ok 。
Create project from existing sources。導入使用idea建立的項目源碼
Import project from external model。 可以導入Eclipse等建立的項目，這些項目将會被成功的被轉idea項目檔案
（因為當時導入忘記截圖，這個是網圖湊合看。）
下一步。
完成，點選 Finish。
3、idea運作
點選視窗左下角 Terminal 進入指令行，這個和cmd 基本一樣。
使用指令npm run dev 運作項目
npm run dev
運作過程沒有出現錯誤，然後檢視運作結果。
這樣就大功告成啦！撒花★,°:.☆(￣▽￣)/$:.°★。撒花！
當然這個學習筆記參考了很多大神的文章，然後融合進了自己學習過程中遇到的問題和難點，做了一些說明，确實是站在了巨人的肩膀上。