Vue3项目下载并使用element-plus及echarts的方法
帮助正在学习vue3 + ts 的小伙伴分享下载和使用element-plus和Echarts的方法
使用element-plus:
1、 下载
npm install element-plus --save
2、在main.js中引入
import elementPlus from 'element-plus'
import 'element-plus/dist/index.css'
3、按需引入
下载:npm install -D unplugin-vue-components unplugin-auto-import
main.js引入:import elementPlus from 'element-plus'
vue.config.js中配置:
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
configureWebpack: {
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({ resolvers: [ElementPlusResolver()],
}),
],
}
但是,只引入了element-plus,我们是无法使用icon图标的,所以需要下载和引入icon图标。
1、下载
npm install @element-plus/icons-vue
2、引入
页面中引入:
import { ArrowDown, Document } from "@element-plus/icons-vue"
注册组件:
components: { ArrowDown, Document }
页面中使用:
<el-icon><document /></el-icon>
<el-icon><arrowDown/></el-icon>
使用Echarts:
1、下载
npm install echarts --save
2、引入
import * as echarts from 'echarts'
3、使用
<div id="charts"></div>
function initChart() {
var chartDom: HTMLElement = document.getElementById(
"charts"
) as HTMLElement;
var myChart = echarts.init(chartDom);
var options = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
yAxis: {
type: "value",
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: "line",
},
],
};
options && myChart.setOption(options);
}
onMounted(() => {
initChart();
});
tips:可能遇到下载报错的问题,下载时后缀添加--legacy-peer-deps 即可
最后为学习v3+ts的小伙伴们安利个vsCode的插件:自动生成ts类型工具
1、扩展中下载 json to ts
将要转的数据放在jon文件中
新建index.json文件
[
{
"id": 1,
"name": "海绵宝宝",
"sex": "男"
},
{
"id": 2,
"name": "海绵",
"sex": "男"
},
{
"id": 3,
"name": "宝宝",
"sex": "男"
}
]
使用方法: control + shift + alt + s 一键生成
结果:
interface RootObject {
id: number;
name: string;
sex: string;
}
更多推荐
所有评论(0)