vue3+vite+Element-plus实现的通用后台

最新推荐文章于 2024-07-18 23:37:19 发布

fishboner

最新推荐文章于 2024-07-18 23:37:19 发布

阅读量591

点赞数 1

分类专栏：项目实战文章标签： vue.js javascript 前端 elementui Powered by 金山文档

本文链接：https://blog.csdn.net/qq_43388031/article/details/129099384

版权

确定版本

node -v
vue - V

v.14.18.1

@vue/cli 4.5.15

创建项目

在对应的位置

yarn create vite my-vue3 --template vue

在my-vue3文件中安装依赖

yarn install

运行

yarn dev

安装element plus

yarn add element-plus -S

按需引用

安装插件

npm install -D unplugin-vue-components unplugin-auto-import

会出错，参照(35条消息) 关于npm ERR!C:\Users\AppData\Roaming\npm-cache\_logs\2020-11-23T01_28_17_030Z-debug.log或者npm audit fix_小红蘑菇的博客-CSDN博客

在vite.config.js中添加

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

并修改为

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    })
  ],
})

之后在vue中直接使用标签即可

路由设置

安装

cnpm install vue-router -S

创建各种文件夹和文件

src/router/index.js 引用router

import { createRouter, createMemoryHistory } from "vue-router"; 

const routes = [
    {
        path: '/',
        component: () => import('../views/Main.vue'),
        children:[
            {
                path: '/',
                name: 'home',
                component: () =>import('../views/home/Home.vue')
            }
        ]
    }
]
const router =  createRouter({
    history: createMemoryHistory(),
    routes
})

export default router</