引入element-plus
在main.js中引用并且使用中文 顺便引入图标库
const app = createApp(App); // 生成的vue实例 已经存在不需要重复创建
...
import ElementPlus from "element-plus";
import zhCn from "element-plus/dist/locale/zh-cn.mjs"; // 中文
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
// 使用icon
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component);
}
app.use(ElementPlus, {
locale: zhCn,
}); // 使用element-plus
引入vuex
在sotre文件夹中创建index.js 以及其他的 moudle
import { createStore } from "vuex";
import app from "./moudle/app.js";
export default createStore({
modules: {
app,
},
state() {
return {
test: 111,
};
},
});
其中 moudle/app.js
const app = {
state: {
flag: false,
},
getters: {
getFlag(state) {
return state.flag
}
},
mutations: {
setFlag: (state, payload) => {
state.flag = payload
}
},
actions: {
// 是否展开左侧导航条
test({commit}, payload) {
return new Promise(resolve => {
commit('setFlag', payload)
resolve(true)
})
}
}
}
export default app
main.js中引入
const app = createApp(App); // 生成的vue实例 已经存在不需要重复创建
...
import store from './store/index'
app.use(store);
在其他页面使用
<script setup>
import sideBarItem from "./sideBarItem.vue";
import { reactive, computed } from "vue";
import { useRoute } from "vue-router";
const router = useRoute();
import store from '@/store/index'
const self = reactive({});
const flag = computed(() => {
return store.getters.getFlag;
});
const changeFlag = () => {
store.dispatch("test", true);
};
</script>
使用props
子组件:
<template>
<p class="title" v-text="title"></p>
<span v-if="showIcon">{{title}}</span>
</template>
<script setup>
import { defineProps, reactive } from "vue"; // 文档上面写着不需要引入 但是控制台有警告 所以干脆就引入了
const props = defineProps({
title: {
type: String,
default: "",
},
showIcon: {
type: Boolean,
default: true,
},
});
const self = reactive({
showContent: true,
});
const handleDisplay = () => {
self.showContent = !self.showContent;
};
</script>
具体使用:
<template>
<div class="test">
<card title="test" :showIcon="false"></card>
</div>
</template>
<script setup>
import card from "@/components/card.vue";
</script>
定义emit事件
子组件:
<template>
<div @click="handleClick(1)">emit事件</div>
</template>
<script setup>
import { defineEmits } from "vue";
const emit = defineEmits([
"emitClick",
]);
const handleClick = (index) => {
emit("emitClick", index;
}
</script>
使用:
<template>
<div class="test">2
<card @emitClick="handleClick"></card>
</div>
</template>
<script setup>
import card from "@/components/card.vue";
const handleClick = (index) => {
console.log('index', index)
}
</script>
使用watch监听props
大部分监听还是差不多意思 这个稍微绕了点
<script setup>
import { watch, defineProps } from "vue";
const props = defineProps({
item: {
type: Object,
required: true,
},
});
// 监听 props 需要使用函数的方式进行返回
watch(() => props.item, (newValue, oldValue) => {
...
})
</script>
computed 计算函数
<script setup>
import { computed } from "vue";
import store from '@/store/index'
const keepRouterList = computed(() => {
return store.getters.getKeepRouters;
});
</script>
refs 使用
其实习惯了之后 感觉这个改动还行 能接受
<template>
<div>
<el-form ref="loginForm" class="login-form">
</el-form>
</div>
</template>
<script setup>
import { reactive, ref } from 'vue'
const loginForm = ref(null) // 变量名是ref的名字 ref的初始值是null
const self = reactive({
...
})
const submitForm = async () => {
loginForm.value.validate((valid) => {
if (valid) {
...
} else {
console.log('error submit!!')
return false;
}
})
}
const resetForm = () => {
loginForm.value.resetFields();
}
</script>
<style scoped>
</style>
vue-router使用
先创建路由文件
import { createRouter, createWebHistory } from "vue-router";
// hash模式:createWebHashHistory
// history模式:createWebHistory
const layout = () =>
import(/* webpackChunkName: "layout" */ "@/views/layout/layout.vue");
const dashboard = () =>
import(/* webpackChunkName: "dashboard" */ "@/views/dashboard/index.vue");
const testDom = () =>
import(/* webpackChunkName: "test" */ "@/views/test/index.vue");
const test2 = () =>
import(/* webpackChunkName: "test" */ "@/views/test/test2.vue");
const login = () => import(/* webpackChunkName: "login" */ "@/views/Login.vue");
export const constantRouterMap = [
{
path: "/login",
name: "login",
component: login,
},
];
const routerList = [
{
path: "/:catchAll(.*)",
redirect: "/login",
},
{
path: "/dashboard",
name: "dashboard",
component: dashboard,
},
{
path: "/test",
name: "test",
component: layout,
redirect: "/test/test",
children: [
{
path: "/test/test",
name: "test1",
component: testDom,
meta: { title: "test1" },
},
{
path: "/test/test2",
name: "test2",
component: test2,
meta: { title: "test2" },
},
],
},
];
const router = createRouter({
history: createWebHistory(),
routes: constantRouterMap.concat(routerList), // 这里做了区分 一个是固定的路由 一个是动态的路由
});
export default router;
在main.js中使用
const app = createApp(App);
...
import router from "@/router";
app.use(router); // 引用路由实例
在需要用到的页面使用 以及监听路由变化
<script setup>
import { useRoute, useRouter } from 'vue-router'
import { watch } from "vue";
// 声明
const route = useRoute()
const router = useRouter()
// 获取query
console.log('route.query', route.query)
// 获取params
console.log('route.params', route.params)
//监听路由变化
watch(router, (to, from) => {
....
});
// 路由跳转
router.push({
path: '/index',
query: {}
})
</script>
实际项目开发下来 效率没有降低多少 相比之下 代码更加简洁了不少 算是有收获
不过
不知道是vue3的原因还是vite的原因 报错提醒不太完整 永远提示在 script标签的最后一行 这就很不好找问题了
而且遇到错误就页面空白了请求文件404 这个问题得排查好久 是一个大坑