* 指令： 就是一个特殊的标记，用来实现html中没有的一些功能。
* 按需加载
* 一次不加载完所有的文件内容，只加载此刻需要用到的那部分（会提前做拆分）
* 当需要更多内容时，再对用到的内容进行即时加载
* webpack 内配置

[JavaScript] 纯文本查看 复制代码

output: {
    path: path.join(__dirname, '/../dist'),
    filename: 'app.js',
    publicPath: defaultSettings.publicPath,
    // 指定 chunkFilename 主要就是添加这一句话
    chunkFilename: '[name].[chunkhash:5].chunk.js',
},...

* 路由配置

[AppleScript] 纯文本查看 复制代码

```javascript
const index = resolve => require.ensure([] , ()=> resolve(require('@/components/index')) , 'index')
//路由
routes: [
{
      path: '/',
      name: 'index',
      component: index
    }
]

// 核心方法
require.ensure(dependencies, callback, chunkName)

第二种方法

[JavaScript] 纯文本查看 复制代码

const home = () => import('@/comm/home.vue')

* axios

[JavaScript] 纯文本查看 复制代码

axios.create({
  baseURL: 'http://127.0.0.1:3000',
  timeout: 1000
});

组件合并

[JavaScript] 纯文本查看 复制代码

const home = () => import(/*webpackChunkName: 'goods'*/ '@/comm/home.vue')
const homes = () => import(/*webpackChunkName:'goods'*/'@/comm/homes.vue')

webpack cdn 优化
webpack.base.conf.js
添加

[JavaScript] 纯文本查看 复制代码

external:{
//键代表包的名称
// 值代表全局的Vue ---> <script src="vue.js"> 全局找
    vue:'vue'
    'vue-loader':'VueRouter'
}

* vue-cli 反向代理

[JavaScript] 纯文本查看 复制代码

```javascript
 // config/index.js中的proxyTable
 
 proxyTable: {
   //这里是我配置的名字
  '/api': {
  //这个路径是我代理到本地tp框架里面
    target: 'http://picup.xxxx.net',
    // 设置https
    secure:false,
    //开启代理
    changeOrigin: true,
    //这里重写路径/run就代理到对应地址
    //数据库收到的 不带/api
    pathRewrite: {
      '^/api': ''
    }
  }
}

get('/api/1/picture?method=upload')

* vue 路由钩子
> 全局钩子

[JavaScript] 纯文本查看 复制代码

 router.beforeEach((to, from, next) => {
    //会在任意路由跳转前执行，next一定要记着执行，不然路由不能跳转了
  console.log('beforeEach')
  console.log(to,from)
  //
  next()
})
//
router.afterEach((to, from) => {
    //会在任意路由跳转后执行
  console.log('afterEach')
})

> 单个路由钩子

[JavaScript] 纯文本查看 复制代码

//只有beforeEnter，在进入前执行，to参数就是当前路由
routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]

> 路由组件钩子

[JavaScript] 纯文本查看 复制代码

beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }

* 动态组件

[JavaScript] 纯文本查看 复制代码

//通过使用保留的 <component> 元素，动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换。根据 v-bind:is="组件名" 中的组件名去自动匹配组件，如果匹配不到则不显示。


        <component v-bind:is="which_to_show"></component>
    
    new Vue({
  el: '#app',
  data:{
          which_to_show:'first'
  },
  components:{
                first:{
                        template:'<div>这是子组件1<div>'
                },
                second:{
                        template:'<div>这是子组件2<div>'
                },
                third:{
                        template:'<div>这是子组件3<div>'
                },
        }
  })

> keep-alive

[JavaScript] 纯文本查看 复制代码

// 动态切换掉的组件（非当前显示的组件）是被移除掉了，如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数

<keep-alive>
        <component v-bind:is="which_to_show" ></component>
        </keep-alive>
    
    //初始情况下，vm.$children属性中只有一个元素（first组件），

//点击按钮切换后，vm.$children属性中有两个元素，

//再次切换后，则有三个元素（三个子组件都保留在内存中）。

//之后无论如何切换，将一直保持有三个元素。

> actived钩子
> 可以延迟执行当前的组件。
具体用法来说，activate是和template、data等属性平级的一个属性，形式是一个函数，函数里默认有一个参数，而这个参数是一个函数，执行这个函数时，才会切换组件。
> 当切换到第二个组件的时候，会先执行activated钩子，会在两秒后显示组件2.起到了延迟加载的作用。

奈斯