// 订阅
import PubSub from 'pubsub-js'
mounted(){
  PubSub.subscribe('add',(msg,data)=>{
    this.addMenu(data);
  })
}
 
// 发布
import PubSub from 'pubsub-js'
PubSub.publist('add',menu)

<script>
  export default{
    name: 'PropsDemo',
    inheritAttrs: false, // title 会自动挂载到元素上 ，false 会取消自动挂载
    props:{
      name: String,
      type:{
        validator: function(value) {
          //  这个值必须匹配下列字符串中的一个
          return ['success','warning','danger'].includes(value);
        }
      },
      list:{
        type: Array,
        // 对象或数组必须从一个工厂函数获取
        default: () => []
      },
      isVisible:{
        type: Boolean,
        default: false
      },
      item: {
        type: Object,
        default: () => ({}),
      },
    }
  }
</script>

<template>
  <PersonalInfo v-model="phoneInfo" :zip-code.sync="zipCode"></PersonalInfo>

  // 最终编译
  <PersonalInfo :phone-info="phoneInfo" :zip-code="zipCode" @change="val => (phoneInfo = val)" @update:zipCode="val => (zipCode = val)"></PersonalInfo>
</template>

<script>
  export default{
    model:{
      prop: "phoneInfo",  // 默认 value
      event: "change"  // 默认 input
    }
  }
</script>

<template>
  <div class="index-container">
    {{name}}
    {{info}}
  </div>
</template>
<script>
export default {
  data() {
    this.name = name;
    return {
      info: {},
      b:1
    }
  },

  computed: {},

  mounted() {},

  methods: {
    handleDataChange(){
      // 不触发组件更新
      this.name = 'vue' + Date.now();
      this.b = 2;
    },
    // 不触发组件更新
    handleAttributesChange(){
      this.info.number = 1;
    }
  }
}
</script>

watch:{
	// 属性监听
	"b.c":function(oldval,val){
	}
	// 深度监听
	obj:{
		handle:function(oldVal,val){
		
		}
		deep:true
	}
	
}

serve -s dist

pwa: {
    name: '豆瓣app',
    themeColor: '#4DBA87',
    msTileColor: '#000000',
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: 'black',
    iconPaths: {
      favicon32: './public/img/icons/favicon-32x32.png',
      favicon16: './public/img/icons/favicon-16x16.png',
      appleTouchIcon: './public/img/icons/apple-touch-icon-152x152.png',
      maskIcon: './public/img/icons/safari-pinned-tab.svg',
      msTileImage: './public/img/icons/msapplication-icon-144x144.png'
    },
    workboxPluginMode: 'InjectManifest', // 需要推送 Push 没得选
    workboxOptions: {
      swSrc: './public/service-worker.js', // 本地sw.js相对路径
      importWorkboxFrom: 'disabled',
      exclude: [/\.html$/, /\.css.map$/, /sw.js$/]
    }
  }

<!-- BaseLayout.vue -->
<div class="container">
  <header>
    <!-- 我们希望把页头放这里 -->
  </header>
  <main>
    <!-- 我们希望把主要内容放这里 -->
  </main>
  <footer>
    <!-- 我们希望把页脚放这里 -->
  </footer>
</div>

<base-layout>
  <template #header>
    <h1>Here might be a page title</h1>
  </template>
  <p>A paragraph for the main content.</p>
  <p>And another one.</p>
  <template #footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

output：{
  publicPath:  '/public/'
}

historyApiFallback: {
  index:  '/public/index.html'
}

npm uninstall webpack webpack-dev-server 
npm i webpack webpack-dev-server -D // webpack 4.29.0 webpack-dev-server 3.1.14
npm install -g babel-upgrade // 升级使用
npx babel-upgrade --write // 写入升级配置删除重复配置
npm i
npm i webpack-cli -D

加入 mode 配置项
将 loader 全部卸载升级

npm i vue-loader@14.2.4 -D
npm i webpack@4.28.4 -D
npm i @babel/plugin-proposal-object-rest-spread -D

npm i vue-loader@15.6.2 -D

├── build                      // 构建相关  
├── config                     // 配置相关
├── src                        // 源代码
│   ├── api                    // 所有请求
│   ├── assets                 // 主题 字体等静态资源
│   ├── components             // 全局公用组件
│   ├── directive              // 全局指令
│   ├── filtres                // 全局 filter
│   ├── icons                  // 项目所有 svg icons
│   ├── lang                   // 国际化 language
│   ├── mock                   // 项目mock 模拟数据
│   ├── router                 // 路由
│   ├── store                  // 全局 store管理
│   ├── styles                 // 全局样式
│   ├── utils                  // 全局公用方法
│   ├── vendor                 // 公用vendor
│   ├── views                   // view
│   ├── App.vue                // 入口页面
│   ├── main.js                // 入口 加载组件 初始化等
│   └── permission.js          // 权限管理
├── static                     // 第三方不打包资源
│   └── Tinymce                // 富文本
├── .babelrc                   // babel-loader 配置
├── eslintrc.js                // eslint 配置项
├── .gitignore                 // git 忽略项
├── favicon.ico                // favicon图标
├── index.html                 // html模板
└── package.json               // package.json

<template>
<!--路由跳转传参-->
  <nuxt-link :to="{name:'news',params:{newsId:3306}}">NEWS</nuxt-link>

<!--路由接收参数-->
  <p>NewsID:{{$route.params.newsId}}</p>
</template>

<template>
  <nuxt-link :to="{name:'news-id',params:{id:123}}">News-1</nuxt-link>
</template>

<script>
  export default {
    validate ({ params }) {
      // Must be a number
      return /^\d+$/.test(params.id)
    }
  }
</script>

<script>
  export default {
    transition:'test'
  }
</script>

<!-- layouts/default.vue -->
<template>
  <div>
    <p>JSPang.com  技术胖的博客</p>
    <nuxt/>
  </div>
</template>

<!--layouts/blog.vue-->
<template>
  <div>
    <div>My blog navigation bar here</div>
    <Nuxt />
  </div>
</template>

<!--pages/posts.vue-->
<template>
  <!-- Your template -->
</template>
<script>
  export default {
    layout: 'blog'
    // page component definitions
  }
</script>

<!--layouts/error.vue-->
<template>
  <div>
    <h1 v-if="error.statusCode === 404">Page not found</h1>
    <h1 v-else>An error occurred</h1>
    <NuxtLink to="/">Home page</NuxtLink>
  </div>
</template>

<script>
  export default {
    props: ['error'],
    layout: 'error' // you can set a custom layout for the error page
  }
</script>

<script>
  export default {
    data(){
      return{
        title:this.$route.params.title,
      }
    },
    // 独立设置 head 信息
    head(){
      return{
        title:this.title,
        meta:[
          {hid:'description',name:'news',content:'This is news page'}
        ]
      }
    }
  }
  </script>

<template>
  <div>
      <h1>姓名：{{info.name}}</h1>
      <h2>年龄：{{info.age}}</h2>
      <h2>兴趣：{{info.interest}}</h2>
  </div>
</template>
<script>
  import axios from 'axios'
  export default {
    data(){
      return {
          name:'hello World',
      }
    },
    // promise
    asyncData(){
        return axios.get('https://api.myjson.com/bins/8gdmr')
        .then((res)=>{
            console.log(res)
            return {info:res.data}
        })
    }
    // await
    async asyncData(){
      let {data}=await axios.get('https://api.myjson.com/bins/8gdmr')
      return {info: data}
    }
  }
</script>

<template>
  <div><img src="~static/logo.png" /></div>
</template>

<style>
  .diss{
    width: 300px;
    height: 100px;
    background-image: url('~static/logo.png')
  }
</style>