03_Vue 如何引入第三方组件库(保姆级教程)_vue3如何本地引入第三方库

Vue 如何引入第三方组件库

1、安装 element-ui

   npm i element-ui -S
1

全局引入

//在main.js写入以下内容
import Vue from 'vue';
import App from './App.vue';

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

new Vue({
	el: '#app',
	render: h => h(App)
});
1
2
3
4
5
6
7
8
9
10
11
12

2、安装 axios

npm install axios
1

全局引入

//在main.js中引入axios
import axios from 'axios'
Vue.prototype.$axios = axios
1
2
3

3、安装 Vant

# Vue 3 项目，安装最新版 Vant： 
	npm i vant -S 

# Vue 2 项目，安装 Vant 2：
	npm i vant@latest-v2 -S
1
2
3
4
5

全局引入

// 在main.js写入以下内容 
	import Vant from 'vant'; 
	import 'vant/lib/index.css'; 

	Vue.use(Vant);
1
2
3
4
5

4、安装 sass-loader

  查看版本  npm  view less-loader versions
1

方式一：建议

因为现在的webpack已经出到5了，但是没有应用，默认应用的是4.46。
所以 如果直接安装  ```npm i less-loader```会安装最新版 不可以，
建议安装7   

npm install --save-dev sass-loader
npm install --save-dev node-sass
npm i -D node-sass@10.x

npm i less-loader@7
1
2
3
4
5
6
7
8
9

方式二：不建议

npm install --save-dev sass-loader@10

npm install --save-dev node-sass@8
1
2
3

5、安装 vuex

	版本对应：     
1

​ vue 2 中 应该使用 ——> vuex 3 版本

​ vue 3 中 应该使用 ——> vuex 4 版本

npm  install vuex@3

//main.js中引入 vuex
//引入vuex 
import Vuex from 'vuex'

//使用 vuex
Vue.use(Vuex)
1
2
3
4
5
6
7
8

版本不匹配的报错：