vue3 setup标签使用总结

引入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 { 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>
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 } 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 这个问题得排查好久 是一个大坑