vite+vue2安装步骤

1、 选择安装vite版本

npm view create-vite versions

2、创建 vite

npm init vite@4.4.1

3、安装npm install

cnpm i

4、在vite-vue2安装：vite-plugin-vue2

cnpm install vite-plugin-vue2 -D

5 在根目录创建vite.config.js文件，来注册插件

import { defineConfig } from 'vite' // 动态配置函数
import { createVuePlugin } from 'vite-plugin-vue2'
import { resolve } from 'path'export default () =>defineConfig({plugins: [createVuePlugin()],server: {open: true, //自动打开浏览器port: 1567 //端口号},resolve: {// 别名alias: [{find: '@',replacement: '/src'}]}})

6、安装vue

npm install vue -S

7、安装vue-template-compiler

npm install vue-template-compiler --save-dev

8、若出错，则删除node_modules

rd node_modules /q/s

9、重复6步骤
10、启动

npm run dev 

11 修改项目文件结构
修改main.js

import Vue from 'vue'
import App from './App.vue'new Vue({render: h => h(App)
}).$mount('#app')

修改index

  <script type="module" src="./main.js"></script>

创建App.vue文件

<template>
<div>Hello Vite Vue2</div>
</template>

vue-route

npm install vue-router@3.5.2 -S

新建router目录
2.2.1 创建路由表
在src目录下创建router目录，并在router目录下创建index.js文件和module目录，在module目录下创建home.js和index.js。这里采用分模块来存放路由表

// /src/router/module/home.js
export const home = [{path: '/home',meta: { title: '首页' },component: () => import('@/views/home/Index.vue')}
]