admin管理员组文章数量:1633739
Vue3+Vite正式开始咯 多页面配置
第一步(创建项目)
我们打开编辑工具打开命令
1.输入创建命令
npm create vite@latest
2.为你的项目起个名字
PS I:\Web\练手\Test> npm create vite@latest
npx: installed 6 in 1.549s
? Project name: » vite-project
3.选择框架vue,上下移动建,回车确认
npx: installed 6 in 1.549s
√ Project name: ... test
? Select a framework: » - Use arrow-keys. Return to submit.
> vanilla
vue
react
preact
lit
svelte
3.这里我们选择vue,不适用typescript,上下移动建,回车确认
√ Project name: ... test
√ Select a framework: » vue
? Select a variant: » - Use arrow-keys. Return to submit.
> vue
vue-ts
4.我们得到一个全新项目
5.接下来我们还需要初始化项目
cd ./项目名
npm install
6.接下里我们启动项目,下面就是项目在浏览器访问的路径了,打开浏览器访问即可
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 -s
2.我们只是在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 router
4.我们打开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 地址就能看到路由效果
如果小伙伴嘛在web编程中遇见的困难都可以积极留言,我会尽量为你解决,大概每天中午1左右在线,其余时间处理更新文章之外很少在线
版权声明:本文标题:Vue3+vite多个html页面配置(多入口文件),以及单个页面路由配置,宝妈级教学,值得一看 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1729174644a1188562.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论