webpack打包优化-vant按需映入

在根目录下新建vue.config.js文件配置跨域多环境变量,路由懒加载,配置别名等...

先说下vant按需引入

• -S 就是--save 将插件安装到生产环境 在package,json中的dependencies 打包会打包到dist中,就是上线也需要用
• -D就是dev将插件安装到开发环境 devDependencies
• 配路由官方推荐首字母大写且两个单词驼峰命名法

1.下载vant

// Vue 2 项目，安装 Vant 2：
npm i vant -S

// Vue 3 项目，安装 Vant 3：
npm i vant@next -S

// 通过 yarn 安装
yarn add vant

2.下载所需插件

// babel-plugin-import 是一款 babel 插件，
//它会在编译过程中将 import 的写法自动转换为按需引入的方式
npm i babel-plugin-import -D

3.在babel.config.js配置

// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

4.在页面注册使用

分为页面注册组件使用,和全局按需引入使用

<template>
  <div class="home">
    <Button type="default">默认按钮</Button>
    <Button loading type="primary" loading-type="spinner" />
  </div>
</template>

<script>
import { Button } from 'vant'

export default {
  name: 'home',
  components: {
    Button
  }
}
</script>

4.1 全局使用按需引入

在根目录下新建plugins文件,里面新建index.j(名字自己取,如果不引入其他就index就可以)

在该文件中做引入操作，最后将这个文件在man.js内引入

//plugins/index.js

import Vue from 'vue'
// 在这里引入你所需的组件就可以
import {
  Button,
  Slider
} from 'vant'

// 按需使用组件
Vue.use(Button)
Vue.use(Slider)

export default Vue

//main.js

import Vue from 'vue'
import App from './App.vue'
import '@/plugins'

// 其他操作...

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

5.在页面正常使用

<template>
  <div class="home">
    <van-button type="default">默认按钮</van-button>
     <van-slider v-model="value" @change="onChange" />
  </div>
</template>


<script>
//注意其他的不需要引入,但Toast需要在当前使用的页面使用
import { Toast  } from "vant";
export default {
  data() {
    return {
    value: 50,
    };
  },
  methods: {  
     onChange(value) {
      Toast('当前值：' + value);
    },
  },
 
};
</script>

更新中...