使用vite创建vue3.2+ts+vue-router+vuex 初始化项目_综合

1. yarn create vite myapp

2. 选中 vue

3. 安装vue-router

$	yarn add vue-router@next 安装最新版本的路由依赖

1.在src目录下 创建 router 文件夹
2.创建index.ts

import {
     createRouter, createWebHashHistory } from 'vue-router'const Router = createRouter({
    history: createWebHashHistory(),routes: [{
    path: '/',name: 'home',component:()=> import('@/views/home.vue')}]
})export default Router

	我在开发vite的项目时，遇到rollup无法解析路径中的@。先使用相对路径解析，但是不认为是一个好方法。后来的找到了另一种解决方案——使用@rollup/plugin-alias。

// 安装依赖
$	yarn add  @rollup/plugin-alias -D// vite.config.ts 文件修改以下内容
import {
     defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';const srcPath = path.resolve(__dirname, 'src');// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue(),],resolve: {
    alias: [{
     find: '@', replacement: srcPath },],},
});// main.ts 中 引入 router 并且使用路由
import {
     createApp } from 'vue'
import App from './App.vue'
import router from './router/index.js'createApp(App).use(router).mount('#app')

在App.vue 文件是使用路由标签

//App.vue
<template><router-view></router-view>
</template>

4. 安装 Vuex

//	安装vuex
$	npm install vuex@next --save  
$	yarn add vuex@next

1.在 src 目录在 创建 store/index.ts

// index.ts
import {
     createStore } from 'vuex'const store = createStore({
    state: {
    },getters: {
    },mutations: {
    },actions: {
    },modules: {
    }
})export default store// main.ts 中 引入 store 并且使用路由
import {
     createApp } from 'vue'
import App from './App.vue'
import router from './router/index.js'
import store from './store/index.js'
createApp(App).use(router).use(store).mount('#app')