1 Webpack
1.1 什么是webpack
1.2 前端模块化
1.3 与其他打包工具frunt/gulp对比
webpack的正常运行,必须依赖node环境,而npm是管理node依赖包
2 main.js => render:
new Vue({
el:'#app',
render :function(createElement) {
//1.普通用法 createElement('标签’,{标签的属性],[’'〕)
return createElement('h2',{class:'box'},['Hello world',
createElement('button',['按钮'])])
//2.调用组件的用法
return createElement(cpn)
}
})
//3.直接调用外部App.vue
new Vue({
el: '#app',
render: c => c(App),
router
})
//----------------------------cpn
const cpn = {
template: `<div>{{message}}</div>`,
data(){return{message:'我是组件'}}
}
runtime-compiler
template > ast > render > vdom > UI
runtime-only(性能更高、代码更少)
render > vdom > UI
3 关于router路由
3.1 什么是路由-页面渲染
路由routing:就是通过互联的网络把信息从北源地址传输到目的地址的活动.
路由中有一个非常重要的概念:路由表。
路由表本质上就是一个映射表,决定了数据包的指向.
3.1.1 后端路由阶段
早期开发通过:后端渲染+后端路由
后端渲染:在服务器中通过jsp/php技术渲染好页面,在发送到浏览器上
3.1.2 前端路由阶段
前后端分离阶段
服务器存储API接口,静态资源服务器存储 多份html+css+js
两者在浏览器需要时发送给它进行渲染
此时暂无前端路由的概念
SPA页面/单页面富应用阶段
与前后端分离不同的是,在静态资源服务器中 只存储一份html+css+js,浏览器请求时全部发送
前端路由:因为只有一份html,前端路由管理的就是url改变后重新渲染页面(而不刷新页面)
3.2 SPA的页面跳转
页内跳转,不请求服务器的html+css+js
URL的hash
补充说明:上面只演示了三个方法
因为history.back()等价于history.go(-1)
history.forward()则等价于history.go(1)
这三个接口等同于浏览器界面的前进后退。
4 路由的基本使用
4.1 router.js详解
步骤二,在Vue中使用插件,实现路由
*******router*****************
//配置路由相关的信息
import VueRouter from 'vue-router '
import Vue from 'vue '
// 1.通过Vue.use(插件),安装插件
vue.use(vueRouter)
// 2.创建VueRouter对象
const routes =[
]
const router =new VueRouter({
//配置路由和组件之间的应用关系routes
routes
})
// 3.将router对象传入到vue实例
export default router
*******mian.js**************
import vue from 'vue '
import App from './App'
import router from './router' //vue中的import目录会自动定位里面的index.js
vue.config.productionTip = false
new Vue({
el: '#app',
router: router,
render: h =>h(App)
}
4.2 路由的具体实现
//1.创建路由组件///
//components/Home.vue/
<template>
<div><h1>我是home</h1></div>
</template>
<script>
export default {
name: 'Home'
}
</script>
<style></style>
//components/About.vue/
<template>
<div><h1>我是关于</h1></div>
</template>
<script>
export default {
name: 'About'
}
</script>
<style></style>
//2.设置映射关系
//router/index.js/
import VueRouter from 'vue-router '
import Vue from 'vue '
//导入组件
import Home from '../component/Home'
import About from '../component/About'
vue.use(vueRouter)
const routes =[
{
//此处是path,不是url的原因,url是http……的格式
path: '/home',
template:null
},
{
path: '/about',
template:null
}
]
const router =new VueRouter({
})
export default router
//3.使用路由//
//App.js/
<template>
<div id="app">
<!-- router-link:全局组件 router-link:渲染routerlink的内容,方法是替换routerview -->
<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style></style>
````````路由默认路径
````````url,修改hash路径为html
//router.js//
const router = new VueRouter({
routes,
mode:'history' //将url内的hash表示转换成html网站
})
4.3 router-link 补充
<router-link to=" /home" tag="button" replace active-class="active">首页</router-link>
tag:修改默认a标签
replace:设定网页不能回退
active-class:设定默认的class名称(可以用默认存在的class设定css),也可以在router.js中改
4.4 用代码实现router路由跳转
$router.push() 和 $router.replace()
4.5 动态路由 ----待看
https://www.bilibili.com/video/BV15741177Eh?p=108