vite+vue2安装步骤

1、 选择安装vite版本

npm view create-vite versions

2、创建 vite

npm init [email protected]

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

创建App.vue文件

vue-route

npm install [email protected] -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')
	}
]