Naive UI Admin搭建流程：依赖安装

可以使用命令和UI方式安装都可，这里提供命令方式。

Naive UI

安装

npm i -D naive-ui

配置

创建src/plugins/naive.js，写入以下内容：

plugins/naive.js

import * as NaiveUI from 'naive-ui';

const naive = NaiveUI.create({
  components: [
    NaiveUI.NMessageProvider,
    NaiveUI.NDialogProvider,
    NaiveUI.NConfigProvider,
    NaiveUI.NButton,
    NaiveUI.NIcon,
    NaiveUI.NDrawer,
    NaiveUI.NDrawerContent,
    NaiveUI.NLayout,
    NaiveUI.NLayoutHeader,
    NaiveUI.NLayoutContent,
    NaiveUI.NLayoutFooter,
    NaiveUI.NLayoutSider,
    NaiveUI.NMenu,
    NaiveUI.NBreadcrumb,
    NaiveUI.NBreadcrumbItem,
    NaiveUI.NDropdown,
    NaiveUI.NSpace,
    NaiveUI.NTooltip,
    NaiveUI.NAvatar,
    NaiveUI.NTabs,
    NaiveUI.NTabPane,
    NaiveUI.NBackTop,
    NaiveUI.NNotificationProvider,
    NaiveUI.NProgress,
    NaiveUI.NLoadingBarProvider,
    NaiveUI.NForm,
    NaiveUI.NFormItem,
    NaiveUI.NCheckbox,
    NaiveUI.NInput,
  ],
});
export function setupNaive(app) {
  app.use(naive);
}

按需引入即可。

创建src/plugins/index.js，写入以下内容：

plugins/index.js

export { setupNaive } from '@/plugins/naive';

注册

在src/main.js中注册Naive UI组件

main.js

import { createApp } from 'vue';
import App from './App.vue';
import { setupNaive } from './plugins';

async function bootstrap() {
  const app = createApp(App);
  
  // 注册全局常用的 naive-ui 组件
  setupNaive(app);

  app.mount('#app', true);
}

bootstrap();

pina

Pinia 是 Vue 新一代的轻量级状态管理库，相当于 Vuex，也是Vue核心团队推荐的状态管理库。

安装

npm install pinia

配置

创建src/store/index.js，内容如下

import { createPinia } from "pinia";
const store = createPinia();

export function setupStore(app) {
  app.use(store);
}

export { store };

挂载

挂载Store，修改src/main.js

src/main.js

import { createApp } from "vue";
import App from "./App.vue";
import { setupStore } from "./store";
import { setupNaive } from "./plugins";

async function bootstrap() {
  const app = createApp(App);

  // 挂载状态管理
  setupStore(app);

  // 注册全局常用的 naive-ui 组件
  setupNaive(app);

  app.mount("#app", true);
}

bootstrap();

Store的配置远不止此，会在后续慢慢完善

tailwindcss(可选)

Tailwind 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center和 rotate-90这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计。无需离开您的HTML，即可快速建立现代网站。

安装

npm install -S tailwindcss@next

配置

Vite需要更多额外配置，请自行百度查询解决

创建src/styles/tailwind.css，写入以下内容：

styles/tailwind.css

/*! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;

引入CSS

在src/main.js中引入css文件：

main.js

import './styles/tailwind.css';

xicons

xicons 是一款整合自 fluentui-system-icons、ionicons、ant-design-icons、material-design-icons、Font-Awesome、tabler-icons 和 carbon的 SVG Vue/React 组件。提供精致图标库。

安装命令：

npm i -D @vicons/ionicons5
npm i -D @vicons/antd

其他依赖

# less 装载
npm install less-loader
# 拖拽, 安装vue-draggable-next
npm install -S vue-draggable-next
npm install -S vuedraggable@next
# 触发resize问题
npm install element-resize-detector --save
# 图标

vue3 draggable拖拽组件报错Cannot read property ‘header‘和‘updated‘问题_draggable header_