过滤器
- 局部过滤器:写在组件的对象中 和data同级
.filter()
- 全局过滤器: 组件定义外部
Vue.filters()
webpack学习
是什么?
- 前端资源化模块化管理和打包工具;
- 按照依赖关系打包生成符合生产环境的静态资源;
- 异步按需加载;
核心概念
- entry 入口; 项目的打包入口文件
- output 出口; 经webpack打包生成结果
- Loader 模块资源转换器(需npm安装); 让webpack打包非.js文件
- webpack.config.js 配置文件 默认会搜索当前目录下的该文件
devDependencies
开发版第三方库dependencies
生产版第三方库dev
脚本,开启node run dev
运行它的代码
- webpack.config.js 配置文件 默认会搜索当前目录下的该文件
- plugins 插件
//安装到本地node_modules
var webpack = require('webpack')
const path = require('path')
module.exports = {
entry: './entry.js', //配置打包的入口文件
output: { //出口
path: path.join(__dirname), //打包的东西放在哪个文件夹下
filename: 'bundle.js' //最终打包生成文件名称
},
module: { //loader的配置
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader'] //从右到左执行 先读取,加到头部
}]
},
plugins: [
new webpack.BannerPlugin('这个文件是zhaolin创建的')
]
}
第三包的信息package.json文件
- npm init -y创建package.json文件 记录第三方包文件;在黑窗执行npm install 自动安装node_modules;
- 安装本地 webpack
npm i webpack @3.11.0 -D
开发版本
webpack打包时的参数
- webpack –progress 查看进度条
- –config 文件名 配置文件webpack.config.dev.js
- –p 压缩
–watch 监控(内容更改时自动重新打包)
npm i -D/-S
-D
:开发环境;-S
:生产环境
webpack + vue 搭建项目(页面看到Hello Vue)
- 1.创建必要的文件和文件夹
* |-src
* |-App.vue 项目根组件
* |-main.js 项目打包的入口文件
* |-package.json 项目记录文件,记录安装哪些第三方包
* |-webpack.config.dev.js 配置文件
* |-template.html
- 2.写上必要代码
App.vue 根组件
<template>
<div>
<h1>Hello Vue!</h1>
<p>测试热重载</p>
</div>
</template>
main.js 导入根组件,利用vue框架创建的render函数渲染根组件
import Vue from 'vue' //相当于var Vue=require('vue')
//导入根组件
import App from './App.vue'
//创建根实例
new Vue({
el:"#app",
//利用vue框架创建的render函数渲染根组件
render:function(createElement){
return createElement(App);
}
})
webpack.config.dev.js 配置文件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry:'./src/main.js',//入口
module:{
rules:[
{
test:/\.vue$/,
use:['vue-loader']
}
]
},
plugins:[
/* 以template.html文件为参照文件,生成index.html;
并且发布到webpack-dev-server开启的node服务器上 */
new HtmlWebpackPlugin({
template:'./template.html'
})
]
}
3.使用
webpack-dev-server
和html-webpack-plugin
html-webpack-plugin
a.以一个参考文件为模版,生成index.html,并且会自动发布到webpack-dev-server开启的node服务上面去
b.创建template.html文件,包含#app标签;
c.配置文件中写plugins数组webpack-dev-server 写package.json中的scripts中
webpack-dev-server --progress --config webpack.config.dev.js --port 6008 --open --hot
--hot
热重载(更改内容后不刷新页面更改)
4.最终运行 根目录下 执行
npm run dev
需要安装的第三方包
- 第一次安装
包:vue
应用场景:我们要去运行App.vue
安装方式:npm i vue -S - 第二次安装
包:vue-loader vue-template-compiler css-loader style-loader
应用场景:我们要打包.vue结尾的文件
安装方式:npm i vue-loader vue-template-compiler css-loader style-loader -D - 第三次安装(两个版本应该对应)
包:html-webpack-plugin [email protected] [email protected]
应用场景:我们到时候运行打包出来的bundle.js
安装方式:npm i html-webpack-plugin [email protected] [email protected] -D