记录Vue3.0+Vite+vue-router+vuex+echarts项目，常用配置

记录Vue3.0+Vite+vue-router+vuex+echarts项目，常用配置

一.安装Vite创建项目

1.安装全局的vite构建工具命令

npm install -g create-vite-app

2.创建项目（假设项目名称为vue3-demo）

create-vite-app vue3-demo
cva vue3-demo

3.进入项目后，拉取依赖

npm install

4.运行项目

npm run dev

二.引入vue-router

1.查看vue-router版本，并下载最新版本

npm info vue-router versions
npm install vue-router@4.08

2.在src目录下，创建建router文件夹，在router文件夹下创建index.js文件(在views下创建Home.vue,Login.vue,Test.vue文件)

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'

// 开启历史模式
// vue2中使用 mode: history 实现
//注意这里使用的是createWebHashHistory()方法，否则，在发布环境中访问回出现白屏
const routerHistory = createWebHashHistory();

const router = createRouter({
    history: routerHistory,
    routes: [
        {
            path: '/',
            redirect: '/login'
        },
        {
            path: '/login',
            name: "Login",
            component: () => import('../views/Login.vue')
        },
        {
            path: '/home',
            name: 'Home',
            component: Home,
            children: [{
                path: '/test',
                name: 'test',
                component: () => import ("../views/Test.vue")
            }]
        }
    ]
})

export default router

3.在main.js中引入router文件夹中的index.js文件(import router from './router/index)

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
const app = createApp(App)
app .use(router)
    .mount('#app')

4.注意：在setup()中没有this，使用以下userRoute()和useRouter()相关方法

<template>
    <div>Login...
     <button @click="login">登录</button>
    </div>
</template>
<script>
import {useRoute, useRouter} from 'vue-router'
export default {
    setup() {
        const $route = useRoute()
        const $router = useRouter()
        function login() {
            $router.push('/home')
        }
        return {
            $route,
            $router,
            login