vue引入vant/elementUl

vant

全局安装

引入vant

npm i vant -S  //vue2.0

在main.js使用

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
 
Vue.use(Vant);

安装后报这个错误

就是版本的问题

在package.json上

 "vant": "^2.12.33",

局部

引入vant

npm i vant -S  //vue2.0

方式一、按需引入组件

下载插件babel-plugin-import，在在编译过程中会将import写法转换为按需引入

##安装插件babel-plugin-import
npm i babel-plugin-import -D

在 babel.config.js 中配置
没有这个文件的自建一个 与src同级

module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

在main.js中

import {Button} from 'vant'
import 'vant/lib/index.css';
Vue.use(Button)
// 引入的多的话
import { Button, Row, Col } from 'vant'
import 'vant/lib/index.css';
Vue.use(Button).use(Row).use(Col)

方式二、手动按需引入组件也就是局部注册

在当前vue页面单独使用引入

import { Button } from 'vant';
 
export default {
  components: {
    [Button.name]: Button,
  },
};

elementUl

全局安装

引入element

npm i element-ui -S

main.js

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

局部

引入element

npm i element-ui -S
npm install babel-plugin-component -D

在balelconfig.js 增加
如果没有在src同级添加balelconfig.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

引入并使用 main.js
//局部引入使用布局时也需要一个个引入要不然不可以

import {Button,Message,Container ,Header,Aside,Main,Footer} from 'element-ui';
Vue.use(Button).use(Container).use(Header).use(Aside).use(Main).use(Footer)
Vue.prototype.$message = Message;//注意 弹框等引入方式不是use