IDEA创建第一个Vue工程

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 安装node.js

下载地址：https://nodejs.org/en/download/。下载完成后默认安装，安装完成后打开cmd 输入下面的命令查看是否成功安装

C:\Users\administrator>node -v

v8.11.3

C:\Users\administrator>npm -v

5.6.0

1.2.2 使用脚手架安装项目

方式：
1.通过在idea中创建
2.在磁盘中创建

注意：
在idea中项目名不能有大写字符。

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

在磁盘中创建

D:\project\hBuilder>vue init webpack vue_project（项目名）
通过cmd命令创建vue项目

由于我的8080端口已经被使用，我修改为8081。 修改/config/index.js文件，找到port: 8080，修改为：port: 8081

然后进入项目下执行

D:\project\hBuilder\vue_project>npm install
D:\project\hBuilder\vue_project>npm run dev

DONE Compiled successfully in 3333ms 10:29:01
I Your application is running here: http://localhost:8081

一个vue项目的模板就出来了
访问ip+端口

通过idea创建

1. 创建空的文件夹

File -》 new -》 project-》empty Project

打开Terminal

运行命令
D:\soft\IDEA\IntelliJ IDEA 2019.1.3\project\vueProject>vue init webpack vue-demo

D:\soft\IDEA\IntelliJ IDEA 2019.1.3\project\vueProject\vue-demo>npm install

D:\soft\IDEA\IntelliJ IDEA 2019.1.3\project\vueProject\vue-demo>npm run dev

就部署完成了

通过idea的run启动

run -》 Edit Configurations

点击加号，选择npm，Name为Dev，package.json选择D:\soft\IDEA\IntelliJ IDEA 2019.1.3\project\vueProject\vue-demo目录下的package.json，Command为run，Scripts为dev,然后就可以直接在idea中运行了。

命令的含义

1.查看 node和npm是不是已经安装好命令：node -v  npm -v (没有安装的先安装环境);
2.npm install -g cnpm --registry=https://registry.npm.taobao.org  (安装国内的淘宝镜像文件，后面的安装npm可以全部改为cnpm)
3.安装 vue-cli   
    1、cnpm install -g vue
    2、cnpm install -g vue-cli 
4. 安装 webpack   cnpm install -g webpack 
5.cd  你的运行目录
6.新建vue项目      vue init webpack vuedemo
7.进入项目目录     cd vuedemo
8.安装依赖        cnpm install
9.运行项目        cnpm run dev
10.发布项目       cnpm run build
注：mac电脑需要在安装淘宝镜像前执行： sudo chown -R $USER /usr/local

使用Element框架

使用element-ui前需安装的模块：

1. 安装 Element-UI 模块

   cnpm install element-ui --save 

2. 引入Element，前面已经全局安装了element-ui，只需要在Vue项目中引入即可

>  1、打开项目：src/main.js,添加下面三条
>       import ElementUI from 'element-ui'    
>       import 'element-ui/lib/theme-chalk/index.css'    
>       Vue.use(ElementUI)