1 创建Vue3项目
vue create xx
选择Vue3模式
2 安装NavieUI
npm i -D naive-ui
3 使用NavieUI
注意,好像只支持按需引用
样例:
<template>
<div class="hello">
<h1>{
{ msg }}</h1>
<!-- 使用-->
<NButton>naive-ui</NButton>
</div>
</template>
<script>
//引入
import { NButton } from 'naive-ui'
export default {
name: 'HelloWorld',
components:{
//注册
NButton:NButton
},
props: {
msg: String
}
}
</script>
<style scoped>
</style>
App.vue
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
4 官网