[JavaScript知识库]Vue小结及webpack打包

常用属性：

• v-if
• v-else-if
• v-else
• v-for
• v-on 绑定事件 简写为 @
• v-model 数据双向绑定
• v-bind 给组件绑定数据 简写为 :

组件化

• 组合组件slot插槽
• 组件内部绑定事件需要用到this.$emit(“事件名称”,参数)
• computed:计算属性的特色，缓存计算数据

Vue遵循Soc 关注度分离原则，通信使用axios

Vue的开发都是要基于NodeJS，实际开发采用vue-cli脚手架开发,vue-router路由,vuex做状态管理;Vue UI,界面我们一般使用ElementUI(饿了么出品),或者ICE(阿里巴巴出品!)来快速搭建前端项目

查看nodejs版本

node -v
npm-v

淘宝加速包

npm install cnpm -g

安装vue-cli

cnpm install vue- cli -g
#测试是否安装成功
#查看可以基于哪些模板创建vue 应用程序，通常我们选择webpack
vue list

创建一个基于webpack模板的vue应用程序

#这里的myvue是项目名称，可以根据自己的需求起名
vue init webpack myvue
一路都选择no即可;

说明:

• Project name:项目名称，默认回车即可
• Project description:项目描述，默认回车即可Author:项目作者，默认回车即可
• lnstall vue-router:是否安装 vue-router，选择n不安装（后期需要再手动添加)
• Use ESLint to lint your code:是否使用ESLint做代码检查，选择n不安装（后期需要再手动添加)
• Set up unit tests:单元测试相关，选择n不安装（后期需要再手动添加)
• Setup e2e tests with Nightwatch:单元测试相关，选择n不安装（后期需要再手动添加)
• Should we run npm install for you after the project has been created:创建完成后直接初始化，选择n，我们手动执行;运行结果!

初始化并运行

//进入创建的vue文件
cd myvue
//初始化
npm install
//运行
npm run dev

安装Webpack
WebPack是一款模块加载器兼打包工具，它能把各种资源，如JS、JSX、ES6、SASS、LESS、图片等都作为模块来处理和使用。
安装:

npm install webpack -g
npm instal1 webpack-cli -g

测试安装成功:

 webpack -v
 webpack-cli -v

配置
创建webpack .config.js配置文件

• entry: 入口文件，指定WebPack用哪个文件作为项目的入口
• output:输出，指定WebPack把处理完成的文件放置到指定路径
• module:模块，用于处理各种类型的文件
• plugins:插件，如∶热更新、代码重用等
• resolve:设置路径指向
• watch:监听，用于设置文件改动后直接打包

使用webpack
1.创建项目
2.创建一个名为modules的目录，用于放置JS模块等资源文件
3.在modules下创建模块文件，如hello.js，用于编写JS模块相关代码

//暴露一个方法:sayHi
exports .sayHi = function () {
document.write( "<div>Hello webPack< / div >" );
};

4.在modules下创建一个名为main.js 的入口文件，用于打包时设置entry属性

//require 导入一个模块,就可以调用这个模块中的方法了
var hello = require ( " . / hello" );
he1lo.sayHi ( );

5.在项目目录下创建webpack.config.js配置文件，使用webpack命令打包

module.exports = {
entry : "./ modules / main.js " ,
output : {
filename : "./js / bundle.js "
}
};

参数 --watch 用于监听变化 可实现热部署

webpack --watch