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