Vue基础知识-（十七）Vue3安装其他应用

本文最后更新于：March 3, 2022 pm

Vue(读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，方便与第三方库或既有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

目录

引入Axios

1
npm i axios -S

配置

1
import axios from 'axios'

Element-Plus

1
npm install element-plus --save

配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
//.use(store).use(router).mount('#app')
app.use(store)
app.use(router)
app.use(ElementPlus)
app.mount('#app')

引入Element-Plus图标库

1
npm install @element-plus/icons-vue

配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import './assets/global.css'
import * as ElIcons from '@element-plus/icons-vue'

const app = createApp(App)

for (const icname in ElIcons){
    app.component(icname,ElIcons[icname])
}

app.use(store)
app.use(router)
app.use(ElementPlus)
app.mount('#app')

另外一种（未验证）

1
2
3
4
5
6
7
8
9
10
11
12
13
npm install @element-plus/icons

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import * as ElIcons from '@element-plus/icons'

const app = createApp(App)
for (const name in ElIcons){
	app.component(name,ElIcons[name])
}

app.use(ElementPlus).mount('#app')

引入Vant3

1
npm i vant

配置

1
2
3
4
5
6
7
8
9
10
11
12
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Vant from 'vant';
import 'vant/lib/index.css';

const app = createApp(App)
app.use(store)
app.use(router)
app.use(Vant)
app.mount('#app')

引入Echarts

1
npm install echarts --save

引入使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import * as echarts from 'echarts';

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
});

注意：在Vue中必须将以上内容放在mounted中！