新建vue3+vite2+naiveui项目

一、构建vite2项目

使用命令行构建

npm init @vitejs/app

设置项目名

选择vue模板（上下方向键选择）

这里我选择js版

用你的IDE打开项目，这里我选择vscode

安装依赖和启动vite

npm i

npm run dev

黄色的字为正常情况，可忽视

运行成功

二、引入naiveui

安装

npm i -D naive-ui

npm i -D vfonts

编辑App.vue试试效果

<template>
  <n-button>naive-ui</n-button>
</template>

<script setup>
// 推荐按需引入组件
import { NButton } from 'naive-ui'
</script>

<style>
</style>

运行查看效果

三、安装vue-router和vuex

命令行安装

npm i vue-router@next vuex@next -S

新建router、store、views文件夹

在views文件夹下新建home.vue文件

<template>
  <n-space>
      这里是主页
    <n-button>Default</n-button>
    <n-button type="primary">Primary</n-button>
    <n-button type="info">Info</n-button>
    <n-button type="success">Success</n-button>
    <n-button type="warning">Warning</n-button>
    <n-button type="error">Error</n-button>
  </n-space>
</template>

<script setup>
import { NButton } from 'naive-ui'
</script>

<style>
</style>

在router文件夹下新建index.js文件

import { createRouter, createWebHashHistory } from "vue-router";

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        { path: '/', component: () => import('../views/home.vue')}
    ]
})

export default router

编辑main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

编辑App.vue

<template>
  <n-button>naive-ui</n-button>
  <!-- 这里引入router-view -->
  <router-view/>
</template>

<script setup>
// 推荐按需引入组件
import { NButton } from 'naive-ui'
</script>

<style>
</style>

运行vite查看路由效果

在store文件夹下新建index.js文件

import { createStore } from 'vuex';

export default createStore({
  state: {
    counter: 0
  },
  mutations: {
      add(state) {
          state.counter++
      }
  }
})

修改main.js文件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

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

修改App.vue

<template>
  <n-button>naive-ui</n-button>
  <!-- 这里测试store是否生效 -->
  <p @click="$store.commit('add')">{{$store.state.counter}}</p>
  <!-- 这里引入router-view -->
  <router-view/>
</template>

<script setup>
// 推荐按需引入组件
import { NButton } from 'naive-ui'
</script>

<style>
</style>

运行查看效果

点击加一