创建vue3项目

创建vue项目

npm init vue@next
npm i
npm i -D unocss @unocss/preset-icons @iconify-json/ic
npm i axios scss sass naive-ui

修改 vite.config.js

import {fileURLToPath, URL} from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

import unocss from "unocss/vite";
import presetIcons from "@unocss/preset-icons";
import { presetAttributify, presetUno } from "unocss";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    unocss({
      presets: [
        presetIcons({
          /* options */
        }),
        // ...other presets
        presetAttributify(),
        presetUno(),
      ],
      rules: [],
    }),
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

修改main.js

import "uno.css";

import naive from 'naive-ui'
app.use(naive)

修改package.json 并创建环境变量文件

  "scripts": {
    "dev": "vite",
    "pro": "vite  --mode production",
    "build": "vite build",
    "preview": "vite preview"
  },

创建文件.env.development .env.production两个文件
文件内必须以VITE开头

# 页面标题
VITE_APP_TITLE = Carole管理系统

# 开发环境配置
VITE_APP_ENV = 'development'

# Carole管理系统/开发环境
VITE_APP_BASE_API = '/dev'