Vue3 下一代web开发方式，更快，更轻，易维护，更多的原生支持.
基于Vue3最新标准，实现后台前端综合解决方案ke↓↓↓
下栽地止：ukoou.com/resource/1078
Vue3 下一代web开发方式，更快，更轻，易维护，更多的原生支持.
一、Vue3.0 环境搭建
使用 vite 创建 Vue(3.2.30)项目
npm install yarn -g
yarn create vite vue3-project --template vue
cd vue3-project // 进入项目根目录
yarn // 安装依赖包
yarn dev // 启动本地服务
安装 vue-router、vuex全家桶
yarn add vue-router@latest // v4.0.14
yarn add vuex@latest // v4.0.2
安装 UI 组件库：在Vue3环境中，一定找支持 Vue3的组件库，那些 Vue2的组件库是无法使用的。
yarn add ant-design-vue@next // v2.2.8
yarn add vite-plugin-components --dev // 支持ant-design-vue按需引入
支持 ant-design-vue 组件按需引入
# vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ViteComponents, { AntDesignVueResolver } from 'vite-plugin-components'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
ViteComponents({
customComponentResolvers: [AntDesignVueResolver()],
})
]
})
支持 Sass 样式语法
yarn add sass // v1.49.9
1、入口文件 main.js
import { createApp } from 'vue'
import router from './router.ts'
import store from './store'
import App from './App.vue'
// 导入UI样式表
import "ant-design-vue/dist/antd.css"
const app = createApp(App)
// 配置全局属性（这里不能再使用Vue.prototype了）
app.config.globalProperties.$http = ''
app.use(router) // 注册路由系统
app.use(store) // 注册状态管理
// 全局指令
app.directive('highlight', {
beforeMount(el, binding, vnode) {
el.style.background = binding.value
}
})
app.mount('#app') // 挂载
2、Vue-Router (v4) 详解
注意：在vue3环境中，必须要使用vue-router(v4)
创建router，使用createRouter()
指定路由模式，使用history属性：createWebHashHistory/createWebHistory()
路由注册，在mian.js中 app.use(router)
如果当前项目严格使用组合式API进行开发，必须使用 useRoute、userRouter等Hooks API进行开发。
<router-link>已经没有tag属性的，可以用custom和插槽实现自定义。
<router-view>新增了"插槽"功能，极其强大，参见路由中的伪代码，它在实现<keep-alive>和<transition>动画将变得更简单，还可以Suspense实现Loading。
新增了几个组合API：useRoute/useRouter/useLink。
查询vue-router(v3)和vue-router(v4)的变化：https://next.router.vuejs.org/zh/guide/migration/index.html
在Vue3环境中编写路由配置，参考代码如下：
import { createRouter, createWebHashHistory } from 'vue-router'
const Home = () => import('@/pages/study/Home.vue')
const Find = () => import('@/pages/study/Find.vue')
const User = () => import('@/pages/study/User.vue')
const Cnode = () => import('@/pages/cnode/index.vue')
export default createRouter({
history: createWebHashHistory(), // Hash路由
routes: [
{
path: '/home',
component: Home,
meta:{transition: 'fade', isAlive: true }
},
{ path: '/find', component: Find },
{ path: '/user', component: User },
{ path: '/cnode', component: Cnode }
]
})
3、Vuex 根store 代码示例
版本：在vue3环境中，必须要使用 vuex(4)
注意：在组件中使用 vuex数据时，哪怕是在setup中，也要使用 computed 来访问状态管理中的数据，否则数据不响应。
在Vue3环境中编写 Vuex代码示例如下：
# src/store/index.ts
import { createStore } from 'vuex'
import cnode from './modules/cnode'
export default createStore({
getters: {},
modules: { cnode }
})
系统配置文件
本管理系统是基于Vite2和Vue3.0构建的后台管理系统。目的是学习VITE、ve3等新技术，方便后续实际开发工作的使用;
本文从管理系统页面布局、Vue路由认证、Vue状态管理、数据持久化、用户信息加密等方面进行了介绍和记录;
这也是边学边学的过程，这样的记录方便了自己在以后的发展过程中，也再次为初学者学习了一些Vue3的学习方法
<template>
<div class="login">
<el-card class="login_center">
<template #header>
<div class="card_header">
<span> User Login </ span>
</div>
</template>
<el-form :model="loginFormState" :rules="rules" ref="loginFormRef">
<el-form-item prop="name">
<el-input
prefix-icon="el-icon-user-solid"
v-model.trim="loginFormState.name"
maxlength="32"
PlaceHolder = "Please enter an account"
clearable
></el-input>
</el-form-item>
<el-form-item prop="pwd">
<el-input
prefix-icon="el-icon-lock"
v-model.trim="loginFormState.pwd"
maxlength="16"
show-password
PlaceHolder = "Please enter your password"
clearable
@keyup.enter.exact="handleLogin"
></el-input>
</el-form-item>
<el-form-item>
<El-Button Type = "primary" style = "width: 100%": loading = "loginformstate.load" @ click = "handlelogin"> login </ el-budton>
</el-form-item>
</el-form>
</el-card>
</div>
</template>
Logic logic code
import { getCurrentInstance, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { encode } from "js-base64";
export default {
setup() {
const { proxy } = getCurrentInstance();
const router = useRouter();
const store = useStore();
const loginFormRef = ref();
const loginFormState = reactive({
name: "",
pwd: "",
loading: false
});
const rules = {
Name: [{Required: True, Message: "Account cannot be empty", Trigger: "blur"}],
pwd: [
{Required: True, Message: "Password cannot be empty", Trigger: "blur"},
{min: 5, max: 16, Message: "Password length is 5-16 bits", Trigger: "blur"}
]
};
const handleLogin = () => {
loginFormRef.value.validate(valid => {
if (!valid) {
return false;
}
loginFormState.loading = true;
let params = { name: loginFormState.name, pwd: loginFormState.pwd };
setTimeout(() => {
let users = { role: loginFormState.name === "admin" ? "admin" : "", username: loginFormState.name };
Object.assign(params, users);
sessionStorage.setItem("jwt", encode(JSON.stringify(params)));
store.dispatch("setUser", params);
loginFormState.loading = false;
router.replace("/");
}, 1000);
// proxy.$axios
// .post("/user/login", proxy.$qs.stringify(params))
// .then(res => {
// let { code, result_data, message } = res.data;
// if (code == 1) {
// console.log("login_success", result_data);
// ElMessage.Success ("Login Success");
// } else {
// ElMessage.Error ("Login Failure:" + Message);
// }
// })
// .catch(err => {
// console.log("login err", err);
// ElMessage.Error ("Login Failure");
// });
});
};
return { loginFormRef, loginFormState, rules, handleLogin };
}
};
登录:
登录页面采用一级租用，配合控制台的路由，这样就很容易控制vue路由器的路由权限;
大多数事件函数和数据状态存储基本在setup函数中完成，不能传入Vue3this来获取当前组件的实例，它不可能像ve2中那样操作数据和事件函数;
在ve3中，为了获取当前组件的实例，我们可以使用evue3providegetcurrentinstance来获取组件的实例;
Wh进入翻译页面
<template>
<el-header height="56px">
<!-- header -->
<div class="header_left">Element-Plus Create By Vite</div>
<div class="header_right">
<! - Exit full screen, enter full screen button ->
<El-Tooltip: Content = "IsFullscreen? 'Exit full screen': 'full screen'">
<i class="el-icon-full-screen" @click="handleFullScreen"></i>
</el-tooltip>
<! - drop down menu ->
<el-dropdown size="medium" @command="handleCommand">
<! - User Information ->
<div class="user_info">
<! - User avatar ->
<el-avatar :size="36" :src="avatar" />
<! - User Ning ->
<span class="username">{{ userName }}</span>
</div>
<template #dropdown>
<! - Fold menu ->
<el-dropdown-menu>
<El-Dropdown-item icon = "EL-ICON-User" Command = "User"> Personal Center </ EL-DROPDOWN-ITEM>
<El-Dropdown-item icon = "El-icon-switch-button" Command = "Logout"> Exit Login </ EL-DROPDOWN-ITEM>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</el-header>
</template>
<! - Secondary routing public routing page ->
<template>
<router-view v-slot="{ Component }">
<transition name="fade" mode="out-in">
<component :is="Component" />
</transition>
</router-view>
</template>
Home Header related logic
import { computed, getCurrentInstance, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import screenfull from "screenfull";
import avatar from "@/assets/img/admin.png";
export default {
setup() {
const { proxy } = getCurrentInstance();
const router = useRouter();
const store = useStore();
const state = reactive({
isFullScreen: false,
avatar,
screenfull
});
const userName = computed(() => store.getters.getUserName);
const handleCommand = command => {
if (command === "user") {
router.push("/user");
} else {
Proxy. $ Message.Success ("Exit Success");
store.dispatch("clearUser");
router.replace("/login");
sessionStorage.clear();
localStorage.clear();
}
};
const handleFullScreen = () => {
if (screenfull.isEnabled) {
state.isFullScreen = !state.isFullScreen;
screenfull.toggle();
}
};
return {
userName,
handleCommand,
handleFullScreen,
...toRefs(state)
};
}
};