集成vuex
项目结构
vue3-ts-cms
├─ .browserslistrc
├─ .editorconfig
├─ .env.development
├─ .env.production
├─ .env.test
├─ .eslintrc.js
├─ .gitignore
├─ .prettierignore
├─ .prettierrc
├─ babel.config.js
├─ package-lock.json
├─ package.json
├─ public
│ ├─ favicon.ico
│ └─ index.html
├─ README.md
├─ src
│ ├─ App.vue
│ ├─ assets
│ │ └─ logo.png
│ ├─ components
│ ├─ global
│ │ ├─ index.ts
│ │ └─ register-element.ts
│ ├─ main.ts
│ ├─ router
│ │ └─ index.ts
│ ├─ service
│ │ ├─ index.ts
│ │ └─ request
│ │ ├─ config.ts
│ │ ├─ index.ts
│ │ └─ type.ts
│ ├─ shims-vue.d.ts
│ ├─ store
│ │ └─ index.ts
│ └─ views
│ ├─ login
│ │ └─ login.vue
│ └─ main
│ └─ main.vue
├─ tsconfig.json
└─ vue.config.js
vue-router 手动集成
安装vue-router的最新版本:
npm install vue-router@next
在根目录下创建router文件夹,在此文件夹下创建 index.ts 文件
index.ts
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
const routes: RouteRecordRaw[] = [
{
path: '/',
redirect: 'login'
},
{
path: '/login',
// 这里使用懒加载方式
component: () => import('@/views/login/login.vue')
},
{
path: '/main',
component: () => import('@/views/main/main.vue')
}
]
const router = createRouter({
routes: routes,
history: createWebHashHistory()
})
export default router
在入口文件main.ts
文件中使用router
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')
在app.vue
文件中配置跳转
<template>
<div>
<router-link to="/login">登录</router-link>
<router-link to="/main">首页</router-link>
<router-view></router-view>
</div>
</template>
vuex 手动集成
安装vuex:
npm install vuex@next
在根目录下创建store文件夹,在此文件夹下创建 index.ts 文件
index.ts
import { createStore } from 'vuex'
const store = createStore({
state: () => {
return {
name: 'zrr'
}
}
})
export default store
在入口文件main.ts
文件中使用vuex
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
const app = createApp(App)
app.use(store)
app.mount('#app')
在app.vue
文件中输出name
<template>
<div>
<h2>{{ $store.state.name }}</h2>
</div>
</template>