【1】创建vite项目

推荐一个前端nodejs学习的网站，https://nodejs.cn/
在这个网站中有几乎所有的前端nodejs框架库的中文官网，看着官网学习更加系统。

创建项目

vite官方文档: https://cn.vitejs.dev/guide/

在终端执行创建项目的命令

pnpm create vite gin-admin-vue --template vue-ts

main.ts './App.vue'错误提示解决

在文件vite-env.d.ts中添加以下代码

/// <reference types="vite/client" />
declare module "*.vue" {
  import type { DefineComponent } from "vue";
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

配置Prettier

Prettier官网https://prettier.nodejs.cn/docs/en/install.html

pnpm i -D prettier

创建.prettierrc文件，具体规则官网查看https://prettier.nodejs.cn/docs/en/options.html

{
  "semi": false,
  "bracketSpacing": true
}

设置@别名

安装@types/node

pnpm add -D @types/node

在tsconfig.json中添加

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  }
}

在vite.config.ts中添加

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from "path"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": resolve(__dirname, "./src"),
    },
  },
})

集成NaiveUI

按需引入自动引入: https://www.naiveui.com/zh-CN/light/docs/import-on-demand

pnpm add -D naive-ui

pnpm add -D unplugin-auto-import

pnpm add -D unplugin-vue-components

在vite.config.ts文件中添加

import { defineConfig } from 'vite'
import vue from "@vitejs/plugin-vue"
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: [
        'vue',
        {
          'naive-ui': [
            'useDialog',
            'useMessage',
            'useNotification',
            'useLoadingBar',
          ],
        },
      ],
    }),
    Components({
      resolvers: [NaiveUiResolver()],
    }),
  ]
})

集成pinia状态管理

pinia官方文档: https://pinia.vuejs.org/zh/getting-started.html

安装pinia

pnpm add pinia

集成vueRouter

vueRouter官方文档: https://router.vuejs.org/zh/installation.html

pnpm add vue-router

配置Eslint

pnpm i -D eslint
pnpm create @eslint/config

配置tailwindcss

文档 https://tailwindcss.com/

pnpm add -D tailwindcss postcss autoprefixer

在src/style.css文件中加入

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

然后在src/main.ts文件中引入src/style.css

import "./style.css"

增加 .nvmrc【可选】

在项目的根目录，新建 .nvmrc 文件，输入初始化时 node 的版本号，用来避免每次切换项目都手动切换 node 版本。

# .nvmrc文件内容
v18

# 在项目根目录使用
nvm use