Vue2+webpack+node 配置+入门+详解
Vue2介绍
1.vue2.0
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
- Vue 的核心库只关注视图层
- 采用单文件组件
- 复杂大型单页应用程序（SPA）
- 响应式的数据绑定，与组件化的开发
HTML中的DOM与其他的部分独立开来划分出一个层次，这个层次就叫做视图层
2.Webpack
Webpack是一个前端打包和构建工具。
webpack有四个核心概念：
- 入口（entry）指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。可以单个入口或多个入口
- 输出（output）输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。
- loader（）loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块
- 插件（plugins）插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务
打包：减少浏览器页面的请求，将图片/脚本代码/，打包成一个文件，只发起一次请求，将资源全部下载。
构建：babel转换，Sass，Less，stylus的CSS预处理器
3. node
通常情况下，JavaScript的运行环境都是浏览器，因此JavaScript的能力也就局限于浏览器能赋予它的权限了。比如说读写本地系统文件这种操作，一般情况下运行在浏览器中的JavaScript代码是没有这个操作权限的。
Node.js是一个服务端的JavaScript运行环境，通过Node.js可以实现用JavaScript写独立程序。即使你不用Node.js写独立程序，也得配一个Node.js运行环境，毕竟很多前端工具都是使用它写的。
4. npm
NPM是一个node.js的包管理器。
包的依赖关系一直是个很头疼的问题，如这个包的代码本身可能还调用了其他的包，那么我们使用时还需要其他的包，在自己的项目中引入这个依赖的包将变得十分困难。
NPM可以安装和管理包。
5.Vue-CLi
它是一个vue.js的脚手架工具。自动生成好项目目录，配置好Webpack，以及各种依赖包的工具
6. Vuex
Vuex是vue的一个状态管理器。用于集中管理一个单页应用程序中的各种状态。
7. Vue-route
Vue-route是vue的一个前端路由器，路由器是一个管理请求入口和页面映射关系的东西。它可以实现对页面局部进行无刷新的替换，让用户感觉就像切换到了网页一样。
8.Axios
Axios是一个基于promise的http库，可以用在浏览器和node.js中
- 支持浏览器和node.js
- 支持promise
- 能拦截请求和响应
- 能转换请求和响应数据
- 能取消请求
- 自动转换JSON数据
- 浏览器端支持防止CSRF(跨站请求伪造)
所以要学Vue需要学多少东西？
1.ECMAScript6的新增功能（promise构造函数，）
2.webpack的配置打包（项目中的配置文件）
3.ESLint配置（一个代码规范和错误检查工具）
4.bable配置（ES6和ES5转换器）
5.npm使用（包的安装与依赖）
6.Vuex（一个存储数据的状态管理器）
7.vue-Route(路由)
8.vue-cli（一键全家桶工具）
…………（html/css/js基本语法就不用多说了，宝宝心累……）
安装
实践出真知，干巴巴的读官方文档真是有苦难言。
宝宝直接一键全家桶后才开始慢慢去了解更多的……
开始使用前，请确保你有这些：
- node.js
- npm
- vue
- vue-cli
- 代码编辑软件（宝宝一直用webstorm,当然也有其他的……）
不懂安装的请去别处搜索，有别的小姐姐小哥哥会告诉你的。
在cmd中查看是否安装，用的版本号是多少，输入命令，有提示说明安装了。（vue 的版本一定要用大写）
> node -v
v8.9.4
>vue -V
2.9.3
>npm -v
6.1.0
构建一个项目
1.创建项目
以上已安装好，请尽情的奔放……
打开cmd命令，进入你需要创建项目的目录下，比如：我要在d盘的project下创建一个名为mydemo的项目
D:\project>vue init webpack mydemo
之后一大串，项目名称，作者，是否build,是否使用代码规范等等一系列，宝宝是一直entry下去的。
然后它会提示三个命令：
cd mydemo //进入你所在项目
npm install //安装依赖包
npm run dev //运行项目
2.安装依赖包
你的文件夹有以下基本文件夹：build,config,src,static。
生成的项目无法直接运行，不然会报错，项目本身依赖很多包模块，你需要安装。
打开cmd进入你的项目目录下：
D:\project\mydemo>npm install
这个过程会很久。
完成之后，项目下会多出一个node_modules文件夹，这就是我们项目所需的依赖包。
3.运行项目
打开cmd进入你的项目目录下:
D:\project\mydemo>npm run dev
会提示项目运行地址：http://localhost:8080
浏览器进入地址，你会看到vue图标，说明项目运行成功。
用cmd命令行很麻烦，如果编码软件支持，可以直接用编码软件直接打开终端运行，较为方便。
这个时候，我就去看官方文档去了，了解一下：
- 构建一个Vue实例，实例的生命周期
- 模板语法
- 指令：v-if,v-show,v-for,v-bind,v-on,v-model
- 数据的处理如何与指令或模板结合
- class/style的绑定
- 组件
- 单页与多页
- 路由
- 组件注册，通信
官方文档还是不错的，受益颇多……
生命周期
每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期。
如下：创建前，创建结束，挂载前，挂载结束，更新前，更新结束，销毁前，销毁结束
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
el: '#app',
data: {
message: 'Vue的生命周期'
},
beforeCreate: function() {
console.group('------beforeCreate创建前状态------');
console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
console.log("%c%s", "color:red","message: " + this.message) //undefined
},
created: function() {
console.group('------created创建完毕状态------');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化 [object object]
console.log("%c%s", "color:red","message: " + this.message); //已被初始化 Vue的生命周期
},
beforeMount: function() {
console.group('------beforeMount挂载前状态------');
console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化[object HTMLDivElement]
console.log(this.$el);//<div id="app">...</div>
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化 [object object]
console.log("%c%s", "color:red","message: " + this.message); //已被初始化 Vue的生命周期
},
mounted: function() {
console.group('------mounted 挂载结束状态------');
console.log("%c%s", "color:red","el : " + this.$el); //已被初始化[object HTMLDivElement]
console.log(this.$el); //<div id="app">...</div>
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化 [object object]
console.log("%c%s", "color:red","message: " + this.message); //已被初始化 Vue的生命周期
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
updated: function () {
console.group('updated 更新完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
}
created:初始化事件，进行数据监测，可见data已经有值，但el并没有变化。
beforemount:
判断实例是否有el节点，在创建实例时是否有挂载DOM节点，vm.$mount('#app'),如若没有，生命周期结束，停止编译。
此时<div>{{message}}</div>并没有值
mounted:挂载完成后，data的message才会真正在视图中显示出文字。
deforeUpdata:data变化，重新渲染。
其他不会解释了，看其他文档，细嚼慢咽吧……
文档解说
配置文件
- webpack.base.conf.js
基础的环境配置，可以说是各个环境（包括开发环境，生产环境，测试环境）都需要的配置，公用配置部分。
包含，编译入口，输出路径和命名规则，省略拓展名，配置很长的相对路径的别名，loader配置不同模块的处理规则 - webpack.dev.conf.js
webpack开发环境的核心配置文件，系统配置文件。
当npm run dev时，运行的就是此文件。
包含，插件 - webpack.prod.conf.js
webpack生产环境的核心配置文件，系统配置文件。
当npm run build时，运行的就是此文件。
包含，打包， - config/index.js
全局配置文件。
包含，，是否使用代码规范，项目入口，端口，服务器代理，
前后台分离时必须部署配置此文件
diss文件夹
build后出现的打包文件夹
src
应当包含以下文件（单页为例）
- assets//图片css
css
img- common //共用js和api
- components //组件
- router
index.js //路由配置- app.vue //.vue入口
- index.js //js入口，相当于（main.js）
package.json
用来管理本地安装 npm 包的唯一文件。它描述了当前项目依赖的包的列表，包含项目依赖包的版本，便于项目管理和移植
.gitignore
忽略文件
.DS_Store
node_modules/
/dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
/test/unit/coverage/
/test/e2e/reports/
selenium-debug.log
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
