1.1 基本概念（基本概念來自網絡學習）
1.1.1 node.js
Node.js是一個Javascript運行環境(runtime)，發布於2009年5月，由Ryan Dahl開發，實質是對Chrome V8引擎進行了封裝。Node.js對一些特殊用例進行優化，提供替代的API，使得V8在非瀏覽器環境下運行得更好。V8引擎執行Javascript的速度非常快，性能非常好。 Node.js是一個基於Chrome JavaScript運行時建立的平台， 用於方便地搭建響應速度快、易於擴展的網絡應用。Node.js 使用事件驅動， 非阻塞I/O模型而得以輕量和高效，非常適合在分布式設備上運行數據密集型的實時應用。總結一下，node,js提供了javascript在瀏覽器以外的一個執行環境，滿足一些特定的場景需求。
1.1.2 npm
npm 是 nodejs 的包管理和分發工具。它可以讓 javascript 開發者能夠更加輕松的共享代碼和共用代碼片段，並且通過 npm 管理你分享的代碼也很方便快捷和簡單。通過npm可以更方便的引用和分析基於nodejs開發的類庫和插件。
1.1.3 Webpack
WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其打包為合適的格式以供瀏覽器使用。通過webpack可以把基於模塊開發的前端工程代碼打包成可以在瀏覽器使用的格式。
1.1.4 Vue
Vue.js 是目前最火的一個前端框架，它和Angular.js、React.js 一起，並成為前端三大主流框架。Vue.js 是一套構建用戶界面的框架，只關注視圖層，它不僅易於上手，還便於與第三方庫或既有項目整合。（Vue有配套的第三方類庫，可以整合起來做大型項目的開發），前端的主要工作，主要負責MVC中的V這一層，主要工作就是和界面打交道，來制作前端頁面效果。Vue 的核心庫只關注視圖層，它不僅易於上手，還便於與第三方庫或既有項目整合
1.1.5 關系說明
npm install是幫助安裝 vue,或React到本地，npm install也可以安裝vue,React的開發工具。當然你完全可以像jQuery一樣自己找網站下載下來，在頁面中引入。
npm就好比是一個前端的插件商店，里面有各種開發者寫的包，你需要的時候就從命令行安裝就可以了，類似與linux的apt的概念。
node.js是服務端，瀏覽器端js有很多缺陷，比如不能操作本地文件吶。而服務端的js就可以，所以用node就能幫我們管理文件，處理I/O，然后經過牛逼的開發者一封裝，一改造，一個grunt就出來了。
vue的開發本身是不依賴node的，不過vue的腳手架工具vue-cli里面集成的webpack是基於node開發出來的。
因此只能說webpack是依賴node的。
1.2 軟件安裝
1.2.1 軟件版本
操作系統：
Windows 10家庭版
應用軟件：
IntelliJ IDEA 2018.3.5 x64
jdk1.8.0_171
Node.js v8.11.3
1.2.2 安裝JDK
讀者可以在Oracle官網獲取最新版的Java版本。安裝完成后配置安裝完成后，配置JAVA_HOME和JRE_HOME環境變量。執行如下命令表示JDK安裝成功：
C:\Users\45014>java -version
java version "1.8.0_171"
Java(TM) SE Runtime Environment (build 1.8.0_171-b11)
Java HotSpot(TM) 64-Bit Server VM (build 25.171-b11, mixed mode)
1.2.3 安裝node.js
下載地址：https://nodejs.org/en/download/。下載完成后默認安裝，安裝完成后打開cmd 輸入下面的命令查看是否成功安裝
C:\Users\45014>node -v
v8.11.3
C:\Users\45014>npm -v
5.6.0
1.2.4 使用腳手架安裝項目
D:\code\Ideaproject\vue_test>vue init webpack vue_test
執行完成后創建如下文件及目錄。
由於我的8080端口已經被使用，我修改為8090。 修改/config/index.js文件，找到port: 8080，修改為：port: 8090
然后執行
D:\code\Ideaproject\vue_test\vue_test>npm install
D:\code\Ideaproject\vue_test\vue_test>npm run dev
> vue_test@1.0.0 dev D:\code\Ideaproject\vue_test\vue_test
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
10% building modules 3/7 modules 4 active ...t\node_modules\webpack\hot\emitter.js
DONE Compiled successfully in 5752ms 21:21:11
I Your application is running here: http://localhost:8090
打開瀏覽器輸入：http://localhost:8090
1.2.5 安裝Idea
參考下載地址（網絡來源，挺好的）：https://www.0daydown.com/02/867195.html
注意只能安裝商業版的idea，否則沒法安裝插件
This plugin provides support for Vue.js in IntelliJ IDEA Ultimate, WebStorm, PhpStorm, PyCharm Professional and RubyMine.
只支持商業版的idea
It provides intelligent Vue-specific code completion, navigation, and refactoring.
The plugin bundles a collection of Vue.js code templates by Sarah Drasner.
1.2.6 安裝Idea的Vue.js插件
找到Idea菜單：
- 選擇File -》 Settings -》 Plugins：搜索vue.js，安裝Vue.js，注意安裝完成后會提示重新IDE
- 設置JavaScript為ECMAScript 6
File -》 Settings -》 Languages&Frameworks -》 JavaScript：修改JavaScript language version為ECMAScript 6
1.2.7 vueAdmin-template導入
新建空的工程：vueAdmin-template，
vueAdmin-template是基於vue的一套后台管理系統基礎模板。
GitHub地址：https://github.com/PanJiaChen/vueAdmin-template#vueadmin-template，
- 下載后解壓到D:\code\vueAdmin-template，導入工程如下：
- 點擊Terminal，並執行npm install
1.2.8 配置run啟動命令
選擇Run菜單下的Edit Configuration，點擊加號，選擇npm，Name為Dev，package.json選擇D:\code\vueAdmin-template目錄下的package.json，Command為run，Scripts為dev,然后就可以直接在idea中運行了。
1.2.9 啟動vueAdmin-template工程
選擇Run下run命令進行執行，顯示如下結果：
注意點：如果提示如下錯誤：
vue中"‘webpack-dev-server’不是內部或外部命令，也不是可運行的程序"的報錯
解決辦法將項目里的“node_modules”文件夾刪除，然后重新運行cnpm install
執行成功后，自動打開瀏覽器並顯示如下界面：
用戶名和密碼輸入admin/admin，即可進入頁面，后續便可自己學習。
-----end--------