vue vant和Element的全局和按需引入

Element 全局引入

1.安装

npm i element-ui -S

2.在main.js中

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

Element 按需引入

1.安装

npm i element-ui -S

2.安装

npm install babel-plugin-component -D

3.更改.babelrc文件配置

    "plugins": [
    "transform-vue-jsx",
    "transform-runtime",
//复制以下内容
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
//复制到这里,粘贴到'"plugins"数组内
  ]

4 .1在 src 文件夹中新建我们的 element 文件夹，并在里面新建一个 index.js 文件
4.2在index文件中去书写我们需要引入的部分组件

// 导入自己需要的组件
import { Select, Option, OptionGroup } from 'element-ui'
const element = {
  install: function (Vue) {
    Vue.use(Select)
    Vue.use(Option)
    Vue.use(OptionGroup)
 
  }
}
export default element

5.在main.js引入该文件

import 'element-ui/lib/theme-chalk/index.css'
    import element from '@/element/index'  
    Vue.use(element.install)  

Element按需引入参考链接,希望大家共同进步

vant全局引入

1. 安装

npm i vant -S

2.在main.js引入

import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

vant按需引入

1.安装

npm i vant -S

2.安装

npm install babel-plugin-import -D

3.更改.babelrc文件配置

"plugins": [
    "transform-vue-jsx",
    "transform-runtime",
//从此处复制
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
//到此处结束
  ] 

到此vant配置文件结束,接下来引入使用

第一种方法

4.1在 src 文件夹中新建我们的 vant文件夹，并在里面新建一个 index.js 文件(和element按需引入一模一样,不同的是引入的组件)
4.2在index文件中去书写我们需要引入的部分组件

// 导入自己需要的组件
import { Icon , Field , Form } from 'vant'
const element = {
  install: function (Vue) {
    Vue.use(Icon )
    Vue.use(Field )
    Vue.use(Form )

  }
}
export default element

5.在main.js引入该文件

    import element from '@/vant/index'  
    Vue.use(element.install)  

第二种方法(直接在组件内使用)

<template>
    ......
</template>
<script>
import { Field, Button } from 'vant'//这一行为关键
export default {
  name: 'login',
  components: {//注册组件名字后可使用
    [Field.name]: Field,
    [Button.name]: Button
  }
}
</script>

如果两个组件都想用,请参考第一种引入