（二）认识webpack 4

webpack的功能：打包工具（将浏览器无法识别的文件类型转换为浏览器可以识别的文件类型）。

一、安装webpack 4：

（）npm install webpack --save-dev
（）npm install webpack-cli --save-dev
npm install webpack-dev-server --save-dev
webpack的配置文件：webpack.config.js
var path=require(‘path’);
module.exports={
entry:’./src/main.js’,
output:{
path:path.join(__dirname,’dist’),
filename:‘bundle.js’
}
}
完成打包功能的命令（下列任意一条即可）：
①webpack
②webpack --mode development
③webpack --mode production

二、webpack的组成：
1、webpack有以下四个概念组成：
（1）入口：entry。指定项目的入口文件（主文件）。
（2）出口：output。打包转换之后的文件。
（3）加载器：loader
（4）插件：plugins
2、webpack服务器的使用：
书写在webpack.config.js文件中。
devServer{
host:’localhost’,
port:9999,
contentBase:path.join(__dirname)
}
在项目的命令提示符下输入下列命令启动服务器：
webpack-dev-server
webpack-dev-server --open
在浏览器中输入：localhost:9999，可以看到index.html的执行结果。
3、在package.json文件中将webpack的一系列启动命令做成npm run
的脚本。
scripts:{
“dev”:“webpack --mode development”,
“build”:“webpack --mode production”,
“start”:“webpack-dev-server --open”
}
可以使用&&在npm run的脚本代码中运行多条指令。
“ok”:“webpack --mode development && webpack-dev-server --open”

三、加载器（loader）：
向webpack指定当遇到某类扩展名文件时，应该如何进行处理。
1、在webpack的配置文件（webpack.config.js）中，利用module键
名配置加载器。
module:{
rules:[
{
test:/.css$/,
use:[‘style-loader’,‘css-loader’]
}
]
}
1、CSS文件的打包：
npm install style-loader --save-dev
npm install css-loader --save-dev
import ‘./style/index.css’;
2、图片文件的打包：
npm install file-loader --save-dev
import x from ‘./images/ncre.png’;
3、js文件的打包：让所有的浏览器都能够支持ES6代码。
npm install babel-loader --save-dev
原理：当遇到ES6代码时，将其转换为ES4/5的格式。
（三）vue-cli
vue-cli有两个版本：2.0/3.0
功能：提供一个Vue项目创建和管理的脚手架。
一、vue-cli 2.0的使用：
1、安装vue-cli 2.0：npm install vue-cli -g
2、vue init webpack 项目名称
?Project name：项目名称
?Project description：项目描述
?Author：作者
?Vue build：选择如何搭建Vue项目。
Runtime + Compiler：运行库+编译
Runtime-only：只是用运行库
?Install vue-router：是否安装vue-router
?Use ESLint to lint your code：是否安装ESLint语法检查功能。
?Set up unit tests：是否建立单元测试。
?Setup e2e tests with Nightwatch：是否建立e2e测试。
选择使用什么包管理工具：NPM、yarn、……
3、项目的目录结构：
（1）[build]：存放用于配置webpack的配置文件。
（2）[config]：存放用于配置vue的配置文件。
（3）[src]：存放项目代码。
main.js：webpack的入口文件。
App.vue：整个项目的主文件（首页）。
[assets]：存放静态文件。
[components]：存放项目中的单组件文件（.vue），用于组件。
新建[pages/views]：存放项目中的页面文件（.vue）。
（4）[static]：存放静态文件。
Vue-cli 2.0项目中[static]和[assets]存放静态文件的区别：
[static]中存放的静态文件webpack不打包。
[assets]中存放的静态文件webpack打包。
（5）index.html：提供HTML文档的模板、提供#app的挂载点。
（6）package.json：记录依赖关系的json文件。
4、使用webstorm来创建Vue项目：
必须安装git。
二、单组件文件：（扩展名为 .vue）
1、单组件文件包含三个组成部分：、

七、为导航项设置当前导航外观：
1、为导航组件设置一个名为 .router-link-active的类：
a:hover,.router-link-active{
background-color:#3385ff;
}
2、标记对有一个名为active-class的属性，该属性的功能
是指定被激活的路由的类名，该属性的默认值router-link-active。
允许更改active-class属性的取值：
返回首页
当前被激活的路由具备一个名为x的类。
3、在路由文件中创建Router类实例的构建参数中使用下列键名：
linkActiveClass:用于设置标记对中active-class属性的
默认取值（router-link-active）。
4、标记对具备一个名为exact属性：该属性的功能是告
诉系统在匹配路由地址时使用精确匹配模式。
公司首页
八、动态路由：
列表类页面：罗列出大量的条目，单击任意条目会进入到详情页绵中。
1、如何引用静态文件：
（1）引用static下的静态文件：

（2）引用src\assets下的静态文件：

2、第一步：在路由文件中为路由地址设置参数。
{
path:‘/productDetail/:pro’,
name:‘productDetail’,
component:()=>import(‘@/pages/productDetail’)
}
3、第二步：在使用路由时指定参数的取值。
（1）利用params来指定参数取值：

<template v-for=“(item,index) in imgsData”>



（2）利用query来指定参数取值：
<template v-for=“(item,index) in imgsData”>



4、第三步：在productDetail.vue文件中接收传递过来的参数。
（1）使用params获取参数取值：
this.proId=this.$route.params.pro;（2）使用query获取参数取值：this.proId=this.$route.query.pro;

http://www.abc.com/movie/ac?a=10&b=20&c=30
域名中携带的参数用？引出，参数名和参数值用=连接，参数之间用&间隔。
域名中携带参数目的：将参数从一个页面传递到另一个页面。
域名中携带参数的参数值中若含有特殊字符，则利用%XX来进行转码，一个西文字符用一个（%XX）来实现，一个中文字符用（%XXXXX）来实现。
（1）利用escape()和unescape()处理地址转码：
escape(url)：将url地址进行转码。
unescape(str)：将字符串str转换成原始的url地址。
（2）利用encodeURI()和decodeURI()处理地址转码：
只对中文文本进行转码。
（2）利用encodeURIComponent()和decodeURIComponent()处理
地址转码：对特殊字符都进行转码。
九、路由守卫：
希望不同的页面的标题栏文本设置的不一样。
1、如何为路由设置元信息：在路由文件的路由信息中使用meta键
来设置元信息。
{path:‘/’,name:‘index’,component:Index,meta:{title:‘公司首页’}}
2、路由全局守卫：
路由全局守卫是指为每一个路由设置守卫信息，该信息必须书写在router\index.js路由文件中，使用路由对象的实例
（1）进入路由时遵循的守卫原则：
router.beforeEach(function(to,from,next){
//to-将要进入的路由
//from-从哪个路由来
//next-放行方法
next()：进入到本路由页面。
next(‘/teach’)、next({name:‘teach’})：进入到/teach路由页面。
})
（2）路由解析之前遵循的守卫原则：
router.beforeResolve(function(to,from,next){ … })
（3）离开路由时遵循的守卫原则：
router.afterEach(function(to,from){ …… })
3、路由独享守卫：
书写在router\index.js路由文件的routes数组中特定的路由信息内部。
beforeEnter:function(to,from,next){ … }

{
path:‘/contact’, name:‘contact’, component:Contact,
beforeEnter:(to,from,next)=>{
//进入到contact路由之前需要执行的内容
}
}
4、组件内守卫：
必须书写在组件的内部，可以在守卫函数中获得路由的参数。
beforeRouteEnter(function(to,from,next){ … })
beforeRouteUpdate(function(to,from,next){ … })
beforeRouteLeave(function(to,from,next){ … })
例：在优秀员工页面中进行部门跳转。
为优秀员工页面设置indent参数：
当indent=1时，教学部。
当indent=2时，市场部。
十、编程式导航：在JS代码中实现导航功能。
1、原生JS如何在代码中实现页面的跳转：
location.href=“url”;
2、使用this.$router的下列方法可以实现编程式导航：（1）this.$router.push()
使用路径路由：this.$router.push(‘/introduce’);使用命名路由：this.$router.push({name:‘introduce’});
（2）this.$router.replace()区别：push()方法会将路由的走向保存在历史记录中，replace()不会将路由的走向保存在历史记录中。3、可以使用this.$router.go(n)直接将路由跳转到历史记录中以当前
路由为依据的前几个记录信息或后几个记录信息中。
十一、如何处理不存在的路由【404页面】：
1、404：服务器向浏览器资源请求返回的状态码【资源未找到】。
2、在router\index.js路由文件中设置一个错误路由信息：
{
path:‘*’, name:‘error’, component:()=>import(‘@/pages/error’)
}
十二、子路由（也叫作“嵌套路由”）：
例：为公司简介页面添加三个子选项（业务介绍、所获荣誉、大事记）
1、子路由的配置：
为路由信息设置children选项，取值为数组。
{
path:‘/introduce’,
name:‘introduce’,
component:()=>import(‘@/pages/introduce’),
children:[
{
path:‘/’,name:‘introA’,
component:()=>import(‘@/pages/introduce/intro01’)
},{
path:‘introB’,name:‘introB’,
compnent:()=>import(‘……’)
},{…}
]
}
子路由中path取值为/的是单击主路由显示的首页。
其他子路由的path属性取值不用以/开头。
2、子路由信息的显示必须在主路由组建中提供一个容器。

十三、重定向与别名：
这两个功能都是路由信息中的选项。
1、重定向：redirect
{ path:‘/a’,redirect:‘/b’}
功能：当访问/a路由时，将重新定向到/b路由下。
2、别名：alias
{path:‘/a’,alias:‘/a/b’}
功能：当访问/a/b路由时，和访问/a路由的效果是一样的。