基于以下技术构建:
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等
<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
稍后部署
如果项目对你有帮助,麻烦帮我点个Star就好了,哈哈哈~~~
由于使用了Vue3,故项目不支持IE11,详细兼容性问题请浏览Vue3官方文档
Copyright (c) 2021-Present Ryzen