vue3+vite后台管理系统---搭建

forever_zc

已于 2024-06-19 11:46:04 修改

阅读量1.5k

点赞数

文章标签：前端

于 2022-12-28 20:53:02 首次发布

本文链接：https://blog.csdn.net/forever_zc/article/details/128473670

版权

本文档介绍了如何使用Vue3、Vite和Element Plus搭建后台管理系统。首先，详细阐述了环境搭建步骤，包括安装Node.js和设置淘宝镜像。接着，详细讲述了Vite项目的创建和启动过程。随后，介绍了Element Plus UI库的引入方法。最后，提到了windicss框架的使用，包括安装和在Vite项目中的配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们做一个基于Vue3 + ElementPlus + Vite实战开发商城后台管理系统，需要搭建好环境和项目以便于后来的编写

环境搭建

第一步：安装node.js环境

官网：Node.js

查看自己的node.js的版本：

第二步：安装淘宝镜像

为了以后安装其他软件方便需要安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

查看淘宝镜像：

vite项目搭建

1.安装：

官网：Vite

2.创建vue3项目

# npm 6.x
npm init vite@latest my-vue-app --template vue
# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue

3.启动

（1）我们先转到创建的项目中去

（2）安装需要的包

（3）启动项目

出来这样的初始化效果

然后我们要使用Element Plus UI库需要引入

Element Plus UI库引入

1.官网

一个 Vue 3 UI 框架 | Element Plus

2.安装

这是我们可以直接使用淘宝镜像去安装

3.引入

main.js中引入

import { createApp } from 'vue'
import './style.css'
// 引入element依赖文件
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')

windicss 框架的使用

1.官网：

https://windicss.org/

2.安装：

在官网中点击菜单安装

然后在终端中输入指令

在Vite配置中添加插件

vite.config.js 文件中添加

import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
import WindiCSS from 'vite-plugin-windicss'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
WindiCSS()
],
})

Vite 入口文件中导入 virtual:windi.css

main.js文件中：

import { createApp } from 'vue'
import './style.css'
// 引入element依赖文件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
// 引入windi.css
import 'virtual:windi.css'
app.mount('#app')

先写到这吧，后面在详细讲解！