Vue3+Vite正式开始咯 多页面配置
第一步（创建项目）
我们打开编辑工具打开命令
1.输入创建命令
npm create vite@latest2.为你的项目起个名字
PS I:\Web\练手\Test> npm create vite@latest
npx: installed 6 in 1.549s
? Project name: » vite-project3.选择框架vue，上下移动建，回车确认
npx: installed 6 in 1.549s
√ Project name: ... test
? Select a framework: » - Use arrow-keys. Return to submit.
> vanilla
vue
react
preact
lit
svelte3.这里我们选择vue，不适用typescript，上下移动建，回车确认
√ Project name: ... test
√ Select a framework: » vue
? Select a variant: » - Use arrow-keys. Return to submit.
> vue
vue-ts4.我们得到一个全新项目
5.接下来我们还需要初始化项目
cd ./项目名
npm install6.接下里我们启动项目，下面就是项目在浏览器访问的路径了，打开浏览器访问即可
npm run dev
现在项目创建完成了，我们开始正式的配置，以上为小白准备
第二步（多页面配置）
1.把项目跟目录下面src目录的文件全部删除，删除项目根目录下的index.html
3.在项目根目录下创建一个index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/index/index_main.js"></script>
</body>
</html>3.在项目根目录下创建一个about.html，这里引入的js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/about/about-main.js"></script>
</body>
</html>4.在项目根目录下src创建index目录，在里面创建Index.vue以及index_main.js文件
Index.vue
<template>
<div>
index 页面
</div>
</template>
<script setup>
</script>
<style scoped>
</style>index_main.js
import { createApp } from 'vue'
import App from './Index.vue'
createApp(App).mount('#app')5.在项目根目录下src创建about目录，在里面创建About.html以及about_main.js文件
About.html
<template>
about 页面
</template>
<script>
</script>
<style scoped>
</style>About_main.js
import {createApp} from 'vue'
import App from './About.vue'
createApp(App).use(router).mount('#app')6.页面以及创建完成我们只需要在vite.config.js配置多文件入口
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path';
export default defineConfig({
plugins: [vue()],
build: {
rollupOptions: {
input: {
index: path.resolve(__dirname, 'index.html'),
about: path.resolve(__dirname, 'about.html'),
}, output: {
chunkFileNames: 'static/js/[name]-[hash].js',
entryFileNames: "static/js/[name]-[hash].js",
assetFileNames: "static/[ext]/name-[hash].[ext]"
}
},
}
})在命令中连按两次 Ctrl+C，然后 npm run dev 重新启动项目，各位端口的配置可能与我不同，输入自己配置的端口 或者显示的端口就好了
http://localhost:3002/ index.html 页面
http://localhost:3002/About.html About.html 页面
以上就是我们的多html页面配置以及多入口文件，
第三步（页面路由配置）
1.我依然打开命令 输入 进行安装路由配置
npm install vue-router -s2.我们只是在About.html配置路由，我们打开about目录创建views目录下面创建01.vue+02.vue组件
01.vue
<template>
about 01组件
</template>
<script>
export default {
name: "01"
}
</script>
<style scoped>
</style>02.vue
<template>
about 02组件
</template>
<script>
export default {
name: "02"
}
</script>
<style scoped>
</style>3.我们打开about目录创建router目录下在创建index.js
import {createRouter, createWebHashHistory} from 'vue-router'
const a1=()=>import('../views/01.vue')
const a2=()=>import('../views/02.vue')
const routes = [{
path:'',
name:'a1',
component:a1
},{
path:'/a2',
name:'a2',
component:a2
},]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router4.我们打开about目录下的about_main.js引入router目录下的idnex.js
import {createApp} from 'vue'
import App from './About.vue'
import router from './router'
createApp(App).use(router).mount('#app')5.我们最后一步只需要在about目录下打开About.vue
<template>
about 页面
<div>
<router-link to="/">组件1</router-link>
---
<router-link to="/a2">组件2</router-link>
<router-view></router-view>
</div>
</template>
<script>
</script>
<style scoped>
.router-link-active {
background-color: #42b983;
}
</style>我们直接打开浏览器，输入About.html 地址就能看到路由效果
