包含路由，vuex，计算器属性，监听，当前对象，上下文，等api的体验
与element-plus组件的加载使用
配置如下
main.js
import {
createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'element-plus'
const app = createApp(App)
import {
ElAlert,
ElAside,
ElAutocomplete,
ElAvatar,
ElBacktop,
ElBadge,
ElBreadcrumb,
ElBreadcrumbItem,
ElButton,
ElButtonGroup,
ElCalendar,
ElCard,
ElCarousel,
ElCarouselItem,
ElCheckbox,
ElCheckboxButton,
ElCheckboxGroup,
ElCol,
ElCollapse,
ElCollapseItem,
ElColorPicker,
ElContainer,
ElDatePicker,
ElDialog,
ElDivider,
ElDrawer,
ElDropdown,
ElDropdownItem,
ElDropdownMenu,
ElFooter,
ElForm,
ElFormItem,
ElHeader,
ElIcon,
ElImage,
ElInput,
ElInputNumber,
ElLink,
ElMain,
ElMenu,
ElMenuItem,
ElMenuItemGroup,
ElOption,
ElOptionGroup,
ElPageHeader,
ElPagination,
ElPopconfirm,
ElPopover,
ElPopper,
ElProgress,
ElRadio,
ElRadioButton,
ElRadioGroup,
ElRate,
ElRow,
ElSelect,
ElSlider,
ElStep,
ElSteps,
ElSubmenu,
ElSwitch,
ElTabPane,
ElTable,
ElTableColumn,
ElTabs,
ElTag,
ElTimePicker,
ElTimeSelect,
ElTimeline,
ElTimelineItem,
ElTooltip,
ElTransfer,
ElTree,
ElUpload,
ElInfiniteScroll,
ElLoading,
ElMessage,
ElMessageBox,
ElNotification,
} from 'element-plus';
const components = [
ElAlert,
ElAside,
ElAutocomplete,
ElAvatar,
ElBacktop,
ElBadge,
ElBreadcrumb,
ElBreadcrumbItem,
ElButton,
ElButtonGroup,
ElCalendar,
ElCard,
ElCarousel,
ElCarouselItem,
ElCheckbox,
ElCheckboxButton,
ElCheckboxGroup,
ElCol,
ElCollapse,
ElCollapseItem,
ElColorPicker,
ElContainer,
ElDatePicker,
ElDialog,
ElDivider,
ElDrawer,
ElDropdown,
ElDropdownItem,
ElDropdownMenu,
ElFooter,
ElForm,
ElFormItem,
ElHeader,
ElIcon,
ElImage,
ElInput,
ElInputNumber,
ElLink,
ElMain,
ElMenu,
ElMenuItem,
ElMenuItemGroup,
ElOption,
ElOptionGroup,
ElPageHeader,
ElPagination,
ElPopconfirm,
ElPopover,
ElPopper,
ElProgress,
ElRadio,
ElRadioButton,
ElRadioGroup,
ElRate,
ElRow,
ElSelect,
ElSlider,
ElStep,
ElSteps,
ElSubmenu,
ElSwitch,
ElTabPane,
ElTable,
ElTableColumn,
ElTabs,
ElTag,
ElTimePicker,
ElTimeSelect,
ElTimeline,
ElTimelineItem,
ElTooltip,
ElTransfer,
ElTree,
ElUpload,
]
const plugins = [
ElInfiniteScroll,
ElLoading,
ElMessage,
ElMessageBox,
ElNotification,
]
components.forEach(component => {
app.component(component.name, component)
})
plugins.forEach((plugin: any) => {
app.use(plugin)
})
app.use(store).use(router).mount('#app')
路由index.js配置
import {
createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/Home.vue'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
vuex 配置
import {
createStore } from 'vuex'
interface Obj {
name: string;
age: number;
sex: string;
}
export default createStore({
state: {
obj: {
name: '123',
age: 21,
sex: '男'
},
index: 0
},
mutations: {
ina: function (state,data) {
state.index = state.index + data
}
},
actions: {
ind: function ({
commit}) {
commit('ina',1)
}
},
modules: {
},
getters: {
liu: function (state) {
return state.obj
},
indexa: function (state) {
return state.index
}
}
})
home组件内容
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
<el-button type="primary" @click="click">主要按钮</el-button>
{
{
index}}{
{
name}}{
{
age}}{
{
number}}{
{
per.liu}}{
{
per}}
</div>
</template>
<script lang="ts">
import {
computed, defineComponent, getCurrentInstance, reactive, ref, toRefs, watch } from 'vue';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import {
useStore} from 'vuex'
import {
useRoute,useRouter} from 'vue-router'
export default defineComponent({
//定义组件
name: 'Home',
components:
HelloWorld,
},
setup (props: object, context: object) {
//props当前实例，context上下文 包含slot attr props emit等等
const sta = useStore() //使用vuex 包含state dispatch getters commit
const rou = useRoute() // 路由信息 query path name params state等等
const dis = useRouter() // 包含push go back等等
const current = getCurrentInstance()// 包含data props type root等等
console.log(sta.getters)
console.log(current)
console.log(rou.query)
console.log(dis)
const index = ref(0)
const obj = reactive({
name: 'liu',
age: 21
})
interface Str {
a: string;
}
const aa: Str = {
a: '12'
}
console.log(aa)
const click = function (e: object) {
index.value ++
console.log(index.value)
console.log(e)
console.log(self)
console.log(props, context)
// sta.dispatch('ind')
sta.commit('ina', 2)
// dis.push({
// path: '/about'
// })
}
watch(index,(val)=>{
// 监听
console.log(val,1)
})
const per = computed(() => {
return sta.getters})
//类似2.x的mapgetters
const number = computed(() => {
return index.value + 1})
return {
click,
index,
...toRefs(obj),
number,
per
}
}
});
</script>