网站设计与开发未来发展方向,做食物网站应该考虑些什么,网站建设工作组,怎么做网站的内部链接Vue2
注意vue2与3安装DataV命令命令是不同的Vue3
DataV - Vue3
官网地址
注意vue2与3安装DataV命令命令是不同的
vue3vite 与 Vue3webpack 对应安装也不同vue3vite
npm install kjgl77/datav-vue3全局引入
// main.ts中全局引入
import { createApp } from vue
import Da…Vue2
注意vue2与3安装DataV命令命令是不同的Vue3
DataV - Vue3
官网地址
注意vue2与3安装DataV命令命令是不同的
vue3vite 与 Vue3webpack 对应安装也不同vue3vite
npm install kjgl77/datav-vue3全局引入
// main.ts中全局引入
import { createApp } from vue
import DataVVue3 from kjgl77/datav-vue3const app createApp(App)app.use(DataVVue3)
app.mount(#app)引入后在.vue文件中可以直接使用
dv-decoration-1 :color[pink,yellow] stylewidth:200px;height:50px; /局部引入 template!-- 引入之后就可以在vue的template中直接使用 --decoration-1 :color[pink,yellow] stylewidth:200px;height:50px; /decoration-2 :reversetrue stylewidth:5px;height:150px; /
/template
!-- 在.vue文件的script中import部分组件 --
script langts setup
import { Decoration1, Decoration2 } from kjgl77/datav-vue3
/script如下案列所示:胶囊柱图 templatediv w50rem h25rem flex~ col justify-center items-center bg-darkdivdv-capsule-chart :configconfig stylewidth:25rem;height:15rem; color: black //divdiv pt5button btn clickaddData增加数据/button/div/div
/template
script setup langts
import { ref, reactive, toRefs, onUnmounted, onMounted } from vue;
const addData (){config.data.push({name: 测试Math.floor(Math.random() * 100),value: Math.floor(Math.random() * 100)})
}
const config reactive({data: [{name: 南阳,value: 167},{name: 周口,value: 123},{name: 漯河,value: 98},{name: 郑州,value: 75},{name: 西峡,value: 66},],colors: [#e062ae, #fb7293, #e690d1, #32c5e9, #96bfff],unit: 万元,labelNum: 8,
})
/script
style scoped
/style
