使用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')