Vue钢架
2.1 建立工程项目实用性npm
1.Vue 钢架是 Vue 非官方提供更多的技术标准应用软件（合作开发网络平台）。
2. 新一代的版是 4.x。
3. 文件格式: https://cli.vuejs.org/zh/。
npm install -g @vue/cli自上而下加装@vue/cli。
vue create xxxx 转换到你要建立工程项目的产品目录,建立工程项目
npm run serve 开启工程项目
附注：如再次出现浏览较慢请实用性 npm 淘宝网快照：npm config set registry
https://registry.npm.taobao.org
2.2 模板工程项目的结构
├── node_modules
├── public
│
├── favicon.ico: 页签图标
│
└── index.html: 主页面
├── src
│
├── assets: 存放静态资源
│
│ └── logo.png
│
│── component: 存放组件
│
│ └── HelloWorld.vue
│
│── App.vue: 汇总所有组件
│
│── main.js: 入口文件
├── .gitignore: git 版管制忽略的实用性
├── babel.config.js: babel 的实用性文件
├── package.json: 应用包实用性文件
├── README.md: 应用描述文件
├── package-lock.json：包版控制文件
├── vue.config.js: 修改实用性https://cli.vuejs.org/zh/config/
Vue 钢架隐藏了所有 webpack 相关的实用性，若想查看具体的 webpakc 实用性，
请执行：vue inspect
修改默认实用性 vue.config.js
2.3 ref 和 Props
props 用于父组件给子组件传递数据
读取方式一：只指定名称
props:[name,age,setName]
读取方式二：指定名称和类型
props: {
name: String,
age: Number,
setNmae: Function
}
读取方式三：指定名称/类型/必要性/默认值
name: {
type: String,
required: true,
default:xxx
},
2.4 混合 mixin
相当于提取公共方法。将两个组件中功能相同的方法，提取到一个外部JS文件中，并且export，在组件中引入，并在mixins实用性项中使用。mixins:[mixin] .
注意：每一个实用性项在混合中都可以写。对于生命周期钩子，当组件和混合中同时存在，两者都要，且混合的先执行。
自上而下混合，在main.js中引入 ，Vue.mixin(“名称”);在自上而下组件中都可以使用定义的混合。
2.5 插件
增强VUE
src下建立plugins.js，且文件中包含install()方法，暴露出去。
main.js中使用插件引入插件，Vue.use(xxx);
export default {
install(Vue){
console.log(“@@@@@@1111111”,Vue)
2.6 浏览器的本地存储
localStorage.setItem(key,value)
localStorage.getItem(key)
sessionStorage.setItem(key,value)
sessionStorage.getItem(key)
2.7 组件自定义事件
父组件：
v-on:可以简写为@atguigu
子组件：
另一种写法：
父组件中
<Student ref=”student” />
<script>
export default{
methods:{
getStudentName(name){
log(name)
mounted(){
this.$refs.student.$on(“atguigu”,this.getStudentName)
</script>
子组件不变
解绑：
子组件：api
this.off() 全解
this.$off(name) 解绑name一个
this.$off([name1,name2]) 解绑多个
2.8 自上而下事件总线
功能：可以实现任意组件之间通信
在 main.js 中加装事件总线
new Vue({
render: h => h(App),
beforeCreate() {
Vue.prototype.$bus = this; // 自上而下加装事件总线
}).$mount(#app)
发送值得组件:
<template>
<div>
<h1>我是borther1</h1>
<button @click=”sendMsgTB2″>点位给borther2传值</button>
</div>
</template>
name: “borther1”,
sendMsgTB2(){
this.$bus.$emit(hello,666);
接受值得组件：
<h1>我是borther2</h1>
<span>传过来的值 ： {{ msg }}</span>
name: “borther2”,
data(){
return{
msg:””
mounted() {
this.$bus.$on(hello,data => {
this.msg = data
console.log(data);
})
beforeDestroy() {
// 销毁之前解绑自上而下事件总线的hello事件
this.$bus.$off(hello);
2.9 消息订阅与发布
该技术依赖第三方库 pubsub.js，当然不止这一种。
加装 ： npm i pubsub-js
收数据：
// 1 引入
import pubsub from “pubsub-js”;
// 2 订阅消息,每次订阅会生成一个ID
this.pid = pubsub.subscribe(“name”,(msgName,data)=> {
// msgName 消息名字
// data 接收到的具体数据
// 3 取消订阅消息 destory钩子中调用
pubsub.unsubscribe(this.pid);
发数据：
// 2 发布消息
pubsub.publish(“name”,data)
2.10 $nextTick
this.$nextTick(function(){
// $nextTick 回调函数会在dom更新完毕之后在执行
2.11 实用性代理（axios）
加装 npm i axios
引入 import axios form “axios”
在vue.config.js中
module.exports = {
proxy: {
/api: { // 请求前缀
target: <url>,
pathRewrite:{
^/api:
ws: true,// 用于支持 websocket
changeOrigin: true,// 用于控制请求中的host值
2.13 插槽
2.13.1 默认插槽
2.13.2 具名插槽
2.13.3 作用域插槽
