IntelliJ IDEA建立第一個Vue工程

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--------