组件生命周期
组件生命周期
常见应用
不要死记硬背，要根据具体情况灵活处理
加载远程数据export default {
data(){
return {
news: []
}
},
async created(){
this.news = await getNews();
}
}
直接操作DOMexport default {
data(){
return {
containerWidth:0,
containerHeight:0
}
},
mounted(){
this.containerWidth = this.$refs.container.clientWidth;
this.containerHeight = this.$refs.container.containerHeight;
}
}
启动和 ...
获取远程数据
本节课内容和vue没有任何关系！
vue cli: https://cli.vuejs.org/zh/
axios: https://github.com/axios/axios
mockjs：http://mockjs.com/
远程获取数据的意义
开发环境有跨域问题sequenceDiagram
浏览器->>前端开发服务器: http://localhost:8080/
前端开发服务器->>浏览器: 页面
浏览器->>后端测试服务器: ajax 跨域：http://test-data:3000/api/news
后端测试服务器->>浏览器: JSON数据
rect rgb(224,74,74)
Note right of 浏览器: 浏览器阻止数据移交
end
生产环境没有跨域问题sequenceDiagram
浏览器->>服务器: http://www.my-site.com/
服务器->>浏览器: 页面 ...
插槽
在某些组件的模板中，有一部分区域需要父组件来指定
<!-- message组件：一个弹窗消息 -->
<div class="message-container">
<div class="content">
<!-- 这里是消息内容，可以是一个文本，也可能是一段html，具体是什么不知道，需要父组件指定 -->
</div>
<button>确定</button>
<button>关闭</button>
</div>
插槽的简单用法此时，就需要使用插槽来定制组件的功能
<!-- message组件：一个弹窗消息 -->
<div class="message-container">
<div class="content">
<!-- slot是vue的内置组件 -->
<slot></slot>
</div>
<button>确定</button>
<button>关闭</button>
</d ...
优化工程结构
如何使用组件？编写组件说明文档
./src/components/README.md
如何测试组件效果？https://cli.vuejs.org/zh/guide/prototyping.html
路由
vue-router官网：https://router.vuejs.org/zh/
如何根据地址中的路径选择不同的组件？
把选择的组件放到哪个位置？
如何无刷新的切换组件？
路由插件npm i vue-router
路由插件的使用
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter); // Vue.use(插件) 在Vue中安装插件
const router = new VueRouter({
// 路由配置
})
new Vue({
...,
router
})
基本使用// 路由配置
const router = new VueRouter({
routes: [ // 路由规则
// 当匹配到路径 /foo 时，渲染 Foo 组件
{ path: '/foo', component: Foo },
// 当匹配到路径 /bar 时，渲染 Bar 组件
...
前端框架的由来
vue官网：https://cn.vuejs.org/
服务端渲染
sequenceDiagram
浏览器->>+服务器: http://duyi.com/news
Note right of 服务器: 组装页面(服务端渲染)
服务器->>-浏览器: 完整页面
前后端分离
sequenceDiagram
浏览器->>服务器: http://duyi.com/news
服务器->>浏览器: 无内容的html
activate 浏览器
浏览器-->>服务器: ajax
服务器-->>浏览器: 各种业务数据
Note left of 浏览器: 运行js，创建元素，渲染页面
deactivate 浏览器
单页应用
sequenceDiagram
浏览器->>服务器: http://duyi.com/news
服务器->>浏览器: 无内容的html
activate 浏览器
Note left of ...
pnpm
pnpmpnpm是一种新起的包管理器，从npm的下载量看，目前还没有超过yarn，但它的实现方式值得主流包管理器学习，某些开发者极力推荐使用pnpm
从结果上来看，它具有以下优势：
目前，安装效率高于npm和yarn的最新版
极其简洁的node_modules目录
避免了开发时使用间接依赖的问题
能极大的降低磁盘空间的占用
安装和使用全局安装pnpm
npm install -g pnpm
之后在使用时，只需要把npm替换为pnpm即可
如果要执行安装在本地的CLI，可以使用pnpx，它和 npx 的功能完全一样，唯一不同的是，在使用pnpx执行一个需要安装的命令时，会使用pnpm进行安装
比如npx mocha执行本地的mocha命令时，如果mocha没有安装，则npx会自动的、临时的安装mocha，安装好后，自动运行mocha命令
pnpm原理
同 yarn 和 npm 一样，pnpm 仍然使用缓存来保存已经安装过的包，以及使用 pnpm-lock.yaml 来记录详细的依赖版本
不同于 yarn 和 npm， pnpm 使用符号链接和硬链接（可将它们想象成快捷方式）的 ...
yarn
yarn 简介
yarn 官网：https://www.yarnpkg.com/zh-Hans/
yarn 是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具，它仍然使用 npm 的registry，不过提供了全新 CLI 来对包进行管理
过去，yarn 的出现极大的抢夺了 npm 的市场，甚至有人戏言，npm 只剩下一个 registry 了。
之所以会出现这种情况，是因为在过去，npm 存在下面的问题：
依赖目录嵌套层次深：过去，npm 的依赖是嵌套的，这在 windows 系统上是一个极大的问题，由于众所周知的原因，windows 系统无法支持太深的目录
下载速度慢
由于嵌套层次的问题，所以npm对包的下载只能是串行的，即前一个包下载完后才会下载下一个包，导致带宽资源没有完全利用
多个相同版本的包被重复的下载
控制台输出繁杂：过去，npm 安装包的时候，每安装一个依赖，就会输出依赖的详细信息，导致一次安装有大量的信息输出到控制台，遇到错误极难查看
工程移植问题：由于 npm 的版本依赖可以是模糊的，可能会导致工程移植 ...
包的安装、配置、使用
包的安装
安装（install）即下载包由于 npm 的官方 registry 服务器位于国外，可能受网速影响导致下载缓慢或失败。因此，安装好 npm 之后，需要重新设置 registry 的地址为国内地址。目前，淘宝 https://registry.npm.taobao.org 提供了国内的 registry 地址，先设置到该地址。设置方式为npm config set registry https://registry.npm.taobao.org。设置好后，通过命令npm config get registry进行检查
npm 安装一个包，分为两种安装方式：
本地安装
全局安装
本地安装使用命令npm install 包名或npm i 包名即可完成本地安装
本地安装的包出现在当前目录下的node_modules目录中
随着开发的进展，node_modules目录会变得异常庞大，目录下的内容不适合直接传输到生产环境，因此通常使用.gitignore文件忽略该目录中的内容本地安装适用于绝大部分的包，它会在当前目录及其子目录中发挥作用通常在项目的根目录中使用本地安装安装一个包 ...
AMD和CMD
AMD和CMD在ES6出了官方标准以后就很少使用了，所以这里只做了就可以
浏览器端模块化的难题CommonJS的工作原理
当使用require(模块路径)导入一个模块时，node会做以下两件事情（不考虑模块缓存）：
通过模块路径找到本机文件，并读取文件内容
将文件中的代码放入到一个函数环境中执行，并将执行后module.exports的值作为require函数的返回结果
正是这两个步骤，使得CommonJS在node端可以良好的被支持
可以认为，CommonJS是同步的，必须要等到加载完文件并执行完代码后才能继续向后执行
当浏览器遇到CommonJS
当想要把CommonJS放到浏览器端时，就遇到了一些挑战
浏览器要加载JS文件，需要远程从服务器读取，而网络传输的效率远远低于node环境中读取本地文件的效率。由于CommonJS是同步的，这会极大的降低运行性能
如果需要读取JS文件内容并把它放入到一个环境中执行，需要浏览器厂商的支持，可是浏览器厂商不愿意提供支持，最大的原因是CommonJS属于社区标准，并非官方标准
新的规范
基于以上两点原因，浏览器无法支持模块化
可这并不代 ...