动态组件 脚手架环境

Posted 2021-05-26 SeventhMeteor

动态组件 脚手架环境

1. keep-alive:

　　<component :is="存储组件的名字的变量"></component>

　　　　activated 被keep-alive缓存的组件激活时调用

　　　　deactivated 被keep-alive缓存的组件停用时调用

　　　　如果没用keep-alive包裹component，那么一定会发生组件的卸载和挂载，如果包裹了，那么组件不会卸载（销毁），而会执行deactivated 

 

2. 脚手架环境（vue-cli）

　　npm i vue/cli -g　　vue -V 能看到版本号就是安装成功了

　　vue create 项目的名字　　（创建脚手架成功）

　　cd 项目的名字

　　yarn serve

　　浏览器 http://localhost:端口号

　　补充：babel es6 —>es5，eslint 语法格式检查工具

3. 脚手架基本的目录结构：

　　依赖是装在node_modules目录下

　　public  静态资源目录

　　src 源码目录

　　.gitignore 上传git仓库时忽略的文件

　　babel.config.js  babel的配置文件

　　readme 项目的说明文件

　　package.json 包的管理文件

4. 用的是 es6 模块化

　　导入 import 变量 from \'组件的路径\'

　　导出 export default

5. 单文件组件（.vue）　　vue-loader 把单文件组件解析为标准的vue组件

　　<template></template>

　　<script></script>

　　<style></style>

6. 脚手架有“热更新”能力，即改变数据后自动刷新页面（默认安装了webpack-dev-server）

7. style scoped 属性，加上后样式只对当前组件生效

8. 改项目的配置文件

　　在项目的根目录下建立一个Vue.config.js文件

　　写配置，报错后要重新启动项目才会生效

9. 脚手架 @ 代表  “src”