创建 #

pnpm create vite naive-admin
# choose vue && vue-ts
cd naive-admin
pnpm install
pnpm run dev

配置alias别名 #

// vite.config.ts

resolve: {
  alias: {
    '@': path.resolve(__dirname, 'src')
  },
}

sass预处理器 #

安装 #

pnpm add sass --save-dev

配置 #

src下新建styles文件夹存放样式文件，如新建 global.scss

全局注入 #

// vite.config.ts

css: {
  preprocessorOptions: {
    scss: {
      additionalData: '@import "@/styles/global.scss";'
    }
  }
}

安装naive ui #

pnpm add naive-ui
pnpm add vfonts
pnpm add -D @vicons/ionicons5
pnpm add -D @vicons/antd

安装tailwindcss #

安装 #

pnpm add -D tailwindcss@latest postcss@latest autoprefixer@latest

配置 #

pnpm tailwindcss init -p: 生成tailwind.config.js和postcss.config.js

// tailwind.config.js

module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {}
  },
  variants: {
    extend: {}
  },
  plugins: []
}

# mkdir

|-- src
    |-- styles
    |   |-- tailwind.css

/* src/styles/tailwind.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

// src/main.ts

import './styles/tailwind.css'

安装 vueuse #

pnpm i @vueuse/core @vueuse/components