vue管理后台搭建

1.vite模板创建

打开vite官网选择你要创建的模板，这里我选择vue-ts模板

复制代码

yarn create vite vue-admin --template vue-ts

到目录，然后运行yarn安装项目依赖，运行yarn dev启动项目，运行端口http://localhost:5173/http://localhost:5173/

2.配置项目

1.配置项目别名@

1.引入@types/node

@types/node内部包含了对Node.js 核心模块及常用第三方库的类型信息描述，增加了TypeScript 对 Node.js 环境的支持

复制代码

yarn add @types/node -D

2.在tsconfig.json文件中添加配置项

在tsconfig.json文件中的compilerOptions对象内添加配置项

复制代码

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

3.在vite.config.ts文件中添加配置项

复制代码

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

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

4.项目可能会有ts提示找不到xxx文件的情况

找到vite-env.d.ts文件，没有的可以创建一个在根目录，代码如下：

复制代码

    /// <reference types="vite/client" />
    declare module "*.vue" {
      import { ComponentOptions } from "vue";
      const componentOptions: ComponentOptions;
      export default componentOptions;
    }
    declare module "vue-router"

3.安装依赖

1.安装sass预处理器

复制代码

yarn add sass sass-loader --dev

2.安装element-plus

复制代码

yarn add element-plus

如果您的终端提示 legacy JS API Deprecation Warning, 您可以配置以下代码在 vite.config.ts 中.

复制代码

css: {
  preprocessorOptions: {
    scss: { api: 'modern-compiler' },
  }
}

main.ts中完整引入element-plus

复制代码

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

3.安装vue-router

复制代码

yarn add vue-router@4

1.新建router/index.ts文件

复制代码

import { createRouter, createWebHistory } from 'vue-router'
 
const routes = [
  {
    path: '/',
    name: 'index',
    component: () => import('@/views/home/index.vue')
  }
]
 
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})
 
export default router

2.App.vue 文件修改

RouterView是路由的出口

复制代码

<template>
  <div>
    <RouterView />
  </div>
</template>

<script setup lang="ts">
</script>

<style lang="scss" scoped>
</style>

3.main.ts 文件修改

引入router文件

复制代码

import { createApp } from 'vue'
import App from './App.vue'
import router from "@/router/index"
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.mount('#app')

未完待续。。。