vue3-admin 手把手教大家如何搭建后台管理系统（一）

工具准备

1. vue3文档：创建一个 Vue 应用 | Vue.js
2. vuex文档：Vuex 是什么？ | Vuex
3. vue-router文档：Vue Router
4. 组件库：Arco Design Vue
5. ts
6. vitejs：开始 {#getting-started} | Vite中文网
7. 参考这个博主的：gitee.com/lin0716/gi-…

本系统是通过 vitejs 构建的 vue3-admin 后台管理项目

使用 Yarn：开启我们的项目搭建

npm i yarn -g

使用 yarn create vite

选择 vue

选择 vue-ts

等待创建成功

接着配置 tsconfig.json

客户端类型#

Vite 默认的类型定义是写给它的 Node.js API 的。要将其补充到一个 Vite 应用的客户端代码环境中，请添加一个 d.ts 声明文件：vite-env.d.ts

/// <reference types="vite/client" />

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

同时，你也可以将vite/client添加到tsconfig中的compilerOptions.types下：

{
  "compilerOptions": {
    "types": ["vite/client"]
  }
}

有时候你需要用到  __dirname，但是会提示报错Cannot find name ‘__dirname‘，也会检测不到 path 包

这个时候需要安装

yarn add @types/node -D

然后继续配置 tsconfig.json

{
  "compilerOptions": {
    "types": ["vite/client", "node"]
  }
}

然后 vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    // 设置别名
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
})

然后我们先把 vuex, vue-router，node-sass, sass-loader, 组件库先安装完毕

yarn add vuex vue-router @arco-design/web-vue
yarn add node-sass sass-loader sass -D

安装完成之后 package.json

{
  "name": "vue3-admin",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.37",
    "vue-router": "^4.1.3",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@arco-design/web-vue": "^2.35.0",
    "@types/node": "^18.7.6",
    "@vitejs/plugin-vue": "^3.0.3",
    "node-sass": "^7.0.1",
    "sass": "^1.54.4",
    "sass-loader": "^13.0.2",
    "typescript": "^4.6.4",
    "vite": "^3.0.7",
    "vue-tsc": "^0.39.5"
  }
}

ok 到此为止，基本的配置就可以了，后面再慢慢加来行检测

在 src 下新建 plugins 目录，新建一个 arco-vue-plugin.ts

import ArcoVue from '@arco-design/web-vue'
// 额外引入图标库
import ArcoVueIcon from '@arco-design/web-vue/es/icon'


export const setArcoVue = (app) => {
  app.use(ArcoVue)
  app.use(ArcoVueIcon)
}

\

接着就是完成 main.ts

import { createApp } from 'vue'
import App from './App.vue'
import '@arco-design/web-vue/dist/arco.css'
import { setArcoVue } from './plugins/arco-vue-plugin'


const app = createApp(App)


setArcoVue(app)
app.mount('#app')