整站下载小飞兔：
项目中，配置文件的作用是想当美丽的。这样使代码看起来好看，用起来还方便。不至于因为某个条件或场景还跑到逻辑里去修改。vue cli 里边就可以自己定义 .env.production .env.development .env
https://cli.vuejs.org/zh/guide/mode-and-env.html
有下边的概念：
- 通过 process.env.xxx 来取。
- 对象命名以 VUE_APP_ 开头。 如 VUE_APP_API
- .env.production 和 .env.development 会覆盖 .env 中定义的。
如果不生效，配置不生效，可能是定义对象的时候没以 VUE_APP_ 开头
这里列举几个定义：
# just a flag
ENV = 'production'
# base api
VUE_APP_BASE_API = 'http://117.24.6.252:8002'
# mode
VUE_APP_MODE = 'history'
知识点方方面面。有时候不能全部都 get 到。碰到一个是一个。
这样就这样
- src/assets 文件夹和 src/static 文件夹。
assets 和 static 两个都是存放静态资源文件。项目中所需要的资源文件图片，字体图标，样式文件等都可以放在这两个文件下，这是相同点
assets中存放的静态资源文件在项目打包时，也就是运行npm run build时会将assets中放置的静态资源文件进行打包上传，所谓打包简单点可以理解为压缩体积，代码格式化。而压缩后的静态资源文件最终也都会放置在static文件中跟着index.html一同上传至服务器
static中放置的静态资源文件就不会要走打包压缩格式化等流程，而是直接进入打包好的目录，直接上传至服务器。因为避免了压缩直接进行上传，在打包时会提高一定的效率，但是static中的资源文件由于没有进行压缩等操作，所以文件的体积也就相对于assets中打包后的文件提交较大点。在服务器中就会占据更大的空间。
- webpackConfig.name 的使用
让 html 的title 动态的变换。就这样用吧。请看清看。
https://blog.csdn.net/weixin_43972992/article/details/102657462
bootstrap 非常好用的地方就是自适应。做自适应网站， bootstrap 是最好不过的工具了。那么，在多大浏览器尺寸下，对 div 进行详细的隐藏和显示操作是其中一个很重要的环节。试试看。
下边这张图，已经很明白的告诉你该怎么做了。
一个网站全部都是安安静静的文字和图片。这样总感觉少了点什么。特别是在 pc 上。那么使用 css 就可以让你的文字和图片动起来。网站也就会有色彩一些了。动动你的小手，多敲敲几行代码吧。
操作一波
- 我们可以使用 transition 实现。
https://www.w3school.com.cn/cssref/pr_transition.asp
.avatar {
transition:top 0.3s ease;
}
但是，transition 需要逻辑去触发。比如鼠标移上去了。或 js 给与其对应的属性变化了。这样对于默认就想看到动画效果比较麻烦。
对于一个完整的站点，有网站展示页面和后台页面。通常，网站展示页面的头部，底部是公共的，中间部分根据需要进行填充。而后台有顶部，侧边菜单，以及底部实现。这个和网站展示页又有所不同。那么，想进行公共部分的抽离，我们就需要定义自己的模板。也就是 layout。
操作一波
我们先去看看文档： https://router.vuejs.org/zh/installation.html
我们先完成第一阶段的部署： https://blog.vini123.com/525
- 第一步，修改从前的 App.vue 文件。这里仅仅放一个
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
某些时候，在一些全局的场景中。我们可能会对某个特殊路由进行处理。这个时候，路由的变化就很有用了。来变变变。
- 方式一
// 监听,当路由发生变化的时候执行
watch:{
$route(to,from){
console.log(to.path);
}
}
- 依旧方式一
watch: {
$route: {
handler: function(val, oldVal){
console.log(val);
},
// 深度观察监听
deep: true
}
},
使用本地图片，本来是可以直接使用的。可，如果是动态的话，常规的方式是不行了。比如，根据某个数据，动态的渲染本地的图片直接来就不行。那终究是有方法的。
操作一波
假如我们的图片存放在 src/assets/image/icons/ 下，有很多张，都是以 png 图片。
常规的使用。
<div>
<img src="@/assets/image/icons/love.png" alt="love" />
</div>
这样就可以了。可如果是下边这样的情形呢。