SPA应用:
SPA: Single Page Application 单页面应用
意思就是整个应用程序只有一个完整的HTML文件。所谓的”页面”,其实只是不同组件片段而已。在浏览器时,按需加载组件片段内容,替换HTML文件中指定位置。
笔试题目:多页面应用 vs 单页面应用
- 请求次数:
多页面应用,会造成反复请求
单页面应用,只请求一次,就拿到所有内容 - 页面跳转的本质:
多页面应用,删除整棵DOM树重建
单页面应用,只替换DOM树中局部节点对象即可 - 共用资源:
多页面应用,多个页面共用的资源,也需要反复请求下载
单页面应用,只在首次加载HTML文件时,请求下载一次 - 页面切换动画:
多页面应用,不可能实现页面切换动画
单页面应用,很容易实现页面切换动画
问题: 首屏加载慢!
解决: 将来Vue项目中可设置“懒加载”——按需加载。
单页面应用实现的原理:
- 定义多个template
- 定义一个唯一的完整的HTML文件。HTML中要有一个特殊的元素占位,表示将来要被不同template替换的位置。
- 定义路由字典:
路由: 一个请求地址和一个组件名的对应关系
路由字典:包含一组路由键值对儿的集合1
2
3
4var routes=[
{'#index', tplIndex},
{'#products', tplProducts}
] - 根据当前url中相对路径或请求参数的不同,用不同的template代替占位符的位置。
- 获得相对路径或请求参数
- 遍历路由列表,找到对应的template,并读取其中内容
- 用template内容代替占位符的位置
脚手架:
什么是: 具有核心功能的半成品代码。我们只要向其中添加个性化自定义内容即可。
为什么: 简化和标准化项目结构
何时: 今后只要开发Vue项目,都是用脚手架生成
如何:
创建项目:
- 下载Vue-CLI脚手架命令行工具。Vue-CLI 专门用于通过命令生成脚手架代码
先安装命令行工具:npm i -g @vue/cli
- 用命令行工具创建项目代码:
vue create 项目名
选Manually select features 手动选择功能
选 Babel: 专门自动将ES6代码转化为ES5代码。比如: ES6 中 抛出模块: export default{ … }
Router: Vue-router组件
Vuex: 客户端状态管理
Use history mode for router 选Y 。采用不带#的路由地址
选 In package.json 将所有子工具的配置,都集中放在一个配置文件中(package.json)
Save this as a preset for future projects? 选N 是否将当前项目配置保存为默认项目配置
Use https://registry.npm.taobao.org for faster installation? 是否使用国内的淘宝镜像作为包管理工具,选n - 运行测试项目:
cd 项目文件夹
项目文件夹下>npm run serve
启动临时开发服务器,编译并宿主Vue生成后的文件。 - 安装必要组件:
npm i -save axios
npm i -save querystring
脚手架项目结构:
- public:专门保存不需要编译的静态资源的文件夹
比如可复制学子商城项目的img文件夹到public下
还保存着唯一的完整静态页面: index.html
共用的css和共用的js - src: 包含项目所有要编译的源代码文件
assets: 需要编译打包的静态资源
views: 所有直接出现在路由字典中的组件
components: 所有全局组件
app.vue: 整个项目中唯一根组件
main.js: 是根组件app.vue的主程序
router.js: 整个项目的路由器和路由字典 - 每个组件的内容:
每个组件都是一个.vue文件
包含三部分内容:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15<template>
<div>
原template中的HTML片段
</div>
</template>
<script>
export default {
原组件对象中的属性: data, mounted(), methods...
}
</script>
<style scoped>
/*当前组件自用的CSS样式*/
</style>
使用Vue重构前端页面
回顾:
①vue中组件的创建、使用
SFC single file component 单文件组件系统 **.vue
组件:可被反复使用的,带有特定功能的模板内容
②vue中基本语法
指令、过滤器、属性、插件
vue官方提供了两个核心插件:vueRouter/vuex
自定义插件的创建和使用
1 | MyPlugin = { |
③vue中组件间内部通信
1 | // props down |
④vue中网络通信 axios
1 | import Axios from 'axios' |
⑤vue-router(路由系统)
基本配置
创建组件
创建容器 <router-view></router-view>
配置路由词典
1 | [ |
配置路由器
1 | new Router({ routes:[] }) |
调用路由器
1 | new Vue({ router:** }) |
跳转 this.$router.push()/go()/back()
传参
配置接收方的路由地址 /detail --> /detail/:id
传参 this.$router.push('/detail/10')
接收参数 this.$route.params.id
守卫:
全局守卫
1 | router.beforeEach((to,from,next)=>{ |
路由独享守卫
1 | { |
⑥vuex
中大型Vue项目 组件间通讯会变得非常复杂,简化通讯任务,使用vuex
Vuex借助于状态来集中式管理数据,读写操作都要经过vuex
准备工作:
npm i vuex
import Vuex from ‘vuex’
Vue.use(Vuex)//this.$store
核心概念:
state: state是负责来初始化数据的
1 | state:{ |
getters: getters是负责在state原始数据基础之上,派生新的数据
1 | getters:{ |
mutations: mutations是负责来定义修改数据的方法,认为类似事件绑定 this.$store.commit(‘getList’,12)
1 | mutations:{ |
actions: 需要异步的来修改数据,异步操作写在action,数据操作还要靠触发mutation来实现 this.$store.dispatch(“myInit”)
1 | actions:{ |
modules:
1 | const moduleA = { |
- 本文作者: Jambo
- 版权声明: 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处!