vue2的使用

一、webpack

（提供前端模块化支持，处理兼容性问题，性能优化等作用）

1.webpack基本使用

终端装包；

在项目目录中创建webpack.config.js的配置文件；

在文件中导入对象后新增dev脚本；

2.webpack中的插件

①webpack-dev-server自动进行项目的打包和构建

安装并在package.json中配置

②html-webpack-plugin 把指定页面复制到根目录中，并在index.html中自动加入bundle.js文件

安装并在package.json中配置

3.loader

Webpack默认只能打包处理.js结尾的文件，所以需要loader加载器

打包处理css、less、url相关文件等

安装babel-loader相关包，转换和处理高级语法；并在项目根目录中创建babel.config.js文件，并在文件中定义babel的配置

4.配置webpack打包发布

①在package.json文件的scripts节点下新增build命令

打包执行npm run build,开发环境执行dev命令

②在webpack.config.js配置文件的output节点进行js的配置

安装clean-webpack-plugin插件，在每次打包时自动清理dist目录下的旧文件

5.Source Map

开发时可正确展示出错位置，通过在webpack.cogfig.js中加入devtool: 'eval-source-map',即可；在发布的时候将devtool: 'eval-source-map'改为devtool: nosources-source-map'只显示错误位置信息，但不暴露源码;或者直接将devtool: 'eval-source-map'删除即可

二、Vue简介

1.vue的特性

数据驱动视图（单向的数据绑定，数据的变化会驱动视图自动更新）；

双向数据绑定（不需要手动操作dom元素，自动将表单中的内容同步到数据源中，即js数据的变化会被自动渲染到页面；页面上表单数据变化时会被vue获取，并更新到js数据中）

2.MVVM原理

MVVM指Model（数据）、View（页面）、ViewModel（vue实例）

三、vue的基本使用

导入vue.js