Vue3项目搭建步骤（六）

最新推荐文章于 2025-03-26 10:27:55 发布

原创最新推荐文章于 2025-03-26 10:27:55 发布 · 105 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

Vue3项目搭建专栏收录该内容

10 篇文章

订阅专栏

本文档详细介绍了如何在Vue3 TypeScript项目中手动集成Vue Router和Vuex。首先，通过npm安装了vue-router@next，并在创建的router/index.ts文件中配置了路由。接着，在main.ts中引入并使用了router。在App.vue中设置了路由链接。对于Vuex的集成，同样通过npm安装了vuex@next，然后在store/index.ts中创建了store，并在main.ts中使用。最后，在App.vue中展示了如何从Vuex state中获取数据。

集成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>