vite+vue3+element开发项目（1）创建项目、配置路由

vue3已经出了两年了，公司考虑将使用vue3重构项目，目前找个比较简单的小项目试试手，本文档位一边开发一边写，所以更新不稳定，也可能断更，望海涵。

一、创建项目

使用vite的命令创建项目，我的npm版本是6.14.17，命令如下，其中iot-school-web是项目名称：

npm create vite@latest iot-school-web --template vue

如果npm的版本是7+，则命令是：

npm create vite@latest iot-school-web -- --template vue

接下来进入项目目录，安装依赖

cd iot-school-web
npm install

安装完依赖后就可以跑项目了

npm run dev

二、配置路由

创建一个空页面，放在views目录里，views是存放所有页面的目录

安装最新版的vue-router的依赖，当前vue-router版本是4.1.6

npm install vue-router@4

创建路由配置文件的目录

创建一个路由实例

import { createRouter, createWebHistory } from 'vue-router';

export const routes = [
  {
    path: '/',
    component: () => import('@/views/login/index.vue')
  }
];

const router = createRouter({
  history: createWebHistory(),
  scrollBehavior: () => ({ left: 0, top: 0 }),
  routes
});

export default router;

vue-router4需要通过createRouter方法来创建路由实例，通过createWebHistory或者createWebHashHistory来设置路由的历史记录，createWebHistory模式是最常见的网址格式，通过/来分割页面路径，但是需要服务器做一些配置，createWebHashHistory模式不需要服务器做相关配置，但是搜索引擎查询不到它，在SEO上表现很差。

其他的配置项和vue-router3一致，scrollBehavior是用来配置切换路由时页面的滚动行为，routes是初始化的路由列表。

这里'@/views/login/index.vue'用到了文件路径的别名@，去vite.config.js文件里配置一下，引入resolve方法，用来配置路径

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    // 文件系统路径的别名
    alias: {
      '@': resolve(__dirname, './src/'),
    }
  }
})

在main.js中引入路由实例

import { createApp } from 'vue'
import router from './router';
import './style.css'
import App from './App.vue'

createApp(App)
  // 公共插件
  .use(router)
  .mount('#app')

修改App.vue文件，引入路由页面

<template>
  <router-view />
</template>

在我们的空页面里随便写点什么

<!-- @/views/login/index.vue -->
<template>
  <h1>这是登录页面</h1>
</template>

接下来看看效果