编程开源技术交流,分享技术与知识

网站首页 > 开源技术 正文

VUE3前端开发入门系列教程二:使用iView框架辅助开发

wxchong 2024-08-26 23:55:24 开源技术 9 ℃ 0 评论

1、安装iView新框架,支持VUE3
npm install view-ui-plus

2、编辑src/main.js,添加以下内容,导入js和css到项目

import ViewUIPlus from 'view-ui-plus'
import 'view-ui-plus/dist/styles/viewuiplus.css'
createApp(App).use(ViewUIPlus).mount('#app')

3、在src/App.vue中引用

<script>
import { Message } from 'view-ui-plus'

export default {
	methods: {
		helloworld(){
			Message.info('Hello, World!')
		}
	}
}
</script>

<template>
	<Button @click="helloworld">你好,世界!</Button>
</template>

4、运行,在浏览器中查看效果
npm run dev
访问:http://localhost:3000


坑:<script></script> 与 <script setup></script>是有区别的。export default不能在<script setup>使用。

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表