RyzenPan / vue3-element-plus-vite

基于Vite构建的Vue3 Setup语法+Element Plus的后台管理系统模版

Vue3 + Element Plus + Vite 后台管理系统模板

基于以下技术构建：

Element Plus

Vue 3

Vite

介绍

Vue3 + Element Plus + Vite 是基于Vue3编写的后台管理系统，UI框架使用了ELement Plus，构建工具使用Vite。

• 项目使用Vue实验性语法 </script>进行编写，其中用到了Vue3的Composition API、Vue Router4、VueX4等，Element组件也使用了Composition API模式下的写法。

• 项目出发点的让大家可以快速理解Vue3的Composition API的写法，可以快速上手Vue3和Element Plus，仅仅用于学习，大家如果想构建一个适合自己项目的基础脚手架，估计还得增加不少功能。

• Vite的构建工具自然不用多说，用过就回不去Webpack了，启动项目时间不到1S，运行时响应也非常快，希望尤大大可以尽快适配Vite到下一代的Vue-Cli。

• 项目我也会继续更新，后续计划是增加一些二次封装Element表单表格组件，让新手使用起来更加简单！

• 希望大家可以多多支持哈～～～

项目准备

你需要先安装 node 和 Git 工具，项目依赖有axios、element-plus、vue、vue-router、vuex、vite等

项目截图

Script代码示例(Login)

<template>
	...
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { ElLoading, ElMessage } from 'element-plus'

const router = useRouter()
const login = ref(null)
const store = useStore()

const userInfo = reactive({
	username: 'admin',
	password: 'admin',
})

const rules = {
	username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
	password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
}

onMounted(() => {
	store.commit('clearTags')
})

const submitForm = () => {
	login.value.validate(valid => {
		if (valid) {
			const loading = ElLoading.service({
				lock: true,
				text: '登录中',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.2)',
			})
			setTimeout(() => {
				ElMessage.success('登录成功')
				localStorage.setItem('ms_username', userInfo.username)
				router.push('/')
				loading.close()
			}, 1000)
		} else {
			ElMessage.error('请输入账号和密码')
			loading.close()
			return false
		}
	})
}
</script>

<style scoped>
...
</style>

开始

# clone the project
git clone https://gitee.com/ryzenpan/vue3-element-plus-vite

# enter the project directory
cd vue3-element-plus-vite

# install dependency
npm install

# develop
npm run dev

This will automatically open http://localhost:3000

构建

npm run build

在线Demo

稍后部署

支持我

如果项目对你有帮助，麻烦帮我点个Star就好了，哈哈哈～～～

浏览器支持

由于使用了Vue3，故项目不支持IE11，详细兼容性问题请浏览Vue3官方文档

License

MIT

Copyright (c) 2021-Present Ryzen