Vue3.0由单页面应用改为多页面开发

一、使用vue cli创建一个单页面应用程序

1、在命令行窗口敲如下图命令，输入完成敲回车会自动打开一个vue的管理界面

2、在管理界面中创建项目

选择好配置开始创建。

具体可以参考vue cli 的官方文档：

https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

二、导入项目项目开始配置

1、使用vue 的相关开发工具导入，导入后的目录结构如下：

三、配置多页面开发(创一个Home页面)

1、在views目录下创建一个home页面如图：（目录是可以自己选择的）

2、APP.vue

<template><div>我的home 页面<a href="about.html">abc</a></div>
</template><script>export default {name: "Home"}
</script><style lang="stylus" rel="stylesheet/stylus"></style>

3、index.js

import Vue from 'vue'
import Home from './App'
import router from './router'
import '@/plugins/element.js'// 阻止启动生产消息，常用作指令
Vue.config.productionTip = falsenew Vue({router,render: h => h(Home)}).$mount('#home')

3、router.js

import Vue from 'vue'
import Router from 'vue-router'Vue.use(Router)export default  new Router({mode: 'history',base: process.env.BASE_URL,routes:[]
})

4、在vue.config.js中配置页面

module.exports = {pages: {index: {entry: 'src/views/home/index.js', // 指定你刚才创建的index.js位置template: 'public/index.html',    // 主的htmml页面位置filename: 'index.html',title: 'home Page'}}
};

注：默认的项目是没有vue.config.js这个文件，这是vue3.0 的特性简化相关配置，如果需要特殊指定则

需要自己创建并进行相关配置。

三、配置多页面开发(创一个abou页面)

1、在views目录下创建在创建一个about页面如图:

2、App.vue

<template><div>我的about页面<el-button type="primary" @click="goMain"> main</el-button><el-button type="primary" @click="goPage1"> Page1</el-button><el-button type="primary" @click="goPage2"> Page2</el-button><router-view></router-view></div>
</template><script>export default {name: "App.vue",methods:{goMain(){this.$router.push("/")},goPage1(){this.$router.push("/page1")},goPage2(){this.$router.push("/page2")}}}
</script><style lang="stylus" rel="stylesheet/stylus"></style>

3、index.js

import Vue from 'vue'
import About from './App'
import router from './router'
import '@/plugins/element.js'// 阻止启动生产消息，常用作指令
Vue.config.productionTip = falsenew Vue({router,render: h => h(About)}).$mount('#about')

4、router.js

import Vue from 'vue'
import Router from 'vue-router'
const main1 = () =>import('./page/main1.vue');
const page1 = () =>import('./page/page1.vue');
const page2 = () =>import('./page/page2.vue');Vue.use(Router)export default  new Router({mode: 'history',base: process.env.BASE_URL,routes:[{path:"/",name: 'page1',component: main1},{path:"/page1",name: 'page1',component: page1},{path:"/page2",name: 'page2',component: page2}]
})

5、然后在依据上面路由创建3个普通界面，测试路由跳转是否还支持

6、创建一个主的html页面

about.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.title %></title></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><!--这个id必须指定成 index.js中写的id--><div id="about"></div><!-- built files will be auto injected --></body>
</html>

注：这里需要注意的一点是，千万不要忘记这个id的配置需要和index.js中的vue指定id一致

7、在vue.config.js中配置该页面：

module.exports = {pages: {index: {entry: 'src/views/home/index.js',template: 'public/index.html',filename: 'index.html',title: 'home Page'},about: {entry: 'src/views/about/index.js',template: 'public/about.html',filename: 'about.html',title: 'About Page'}}
};

四、使用工具启动项目

或者使用npm 命令：

npm run serve

五、最终效果

1、home 界面

2、点击上面abc链接跳转到about页面

3、点击about页面上的page2，下面路由到page2页面

六、打包后的会区分开

Vue3.0由单页面应用改为多页面开发相关推荐

vue3.0+vant3仿快手/抖音短视频|Vue3+Vite2聊天/直播实例
vue3.0-douyin 基于vue3.x开发仿抖音app界面小视频+直播聊天实例. 基于Vue3框架技术搭建一款仿抖音APP界面小视频+直播实战案例.运用到了vite2+vue3.0.5+vuex ...
vue3.0 Composition API 上手初体验使用 vue-router 构建多页面应用
vue3.0 Composition API 上手初体验使用 vue-router 构建多页面应用前两讲,我们已经顺利的使用 vue3.0 将项目跑起来了.但是实在是过于简陋,目前我们几乎不可能开 ...
单页面二改套后台，后台采用的是迅睿CMS框架
介绍: 本源码由单页面二改套后台,后台采用的是迅睿CMS框架迅睿CMS基于PHP8高性能,后台简单易用,插件也很丰富,有技术的可再次开发增加功能. 迅睿CMS框架基于MIT开源协议发布,免费且不限制 ...
基于vue3.0简单的页面使用
基于vue3.0简单的页面使用项目效果图项目文件图 package.json main.js App.vue views/Tutorial.vue views/TS.vue views/Docs. ...
Vue最全知识点，面试必备（基础到进阶，覆盖vue3.0，持续更新整理，欢迎补充讨论）
声明:本篇文章纯属笔记性文章,非整体原创,是对vue知识的整理,对自己有很大帮助才分享出来,参考文章传送:1.童欧巴对vue知识的整理 2.我是你的超级英雄对vue知识的整理 3.vue官网基础篇 ...
TypeScript及TypeScript在vue3.0项目中的基本使用
一. TypeScript是什么 TypeScript 是一种由微软开发的自由开源的编程语言,主要提供了类型系统和对 ES6的支持.它是JavaScript的一个超集,扩展了JavaScript的语 ...
【Vue学习笔记】尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通
尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通 1.Vue核心部分 1.1 Vue简介 1.1.1 Vue是什么? Vue是一套用于构建用户界面的渐进式JavaScript框架. ...
vue3.0+ts+element-plus多页签应用模板：多级路由缓存
目录系列文章一.先说点啥 1. 为啥需要路由缓存? 2. 怎么实现路由缓存? 二.路由扁平化三.定义tag模块处理路由缓存四.切换路由时加入缓存五.使用keep-alive 系列文章 vue ...
mars3d基于vue3.0的widget使用
mars3d在vue3.0生态上开发了两个gis相关开源项目 mars3d-vue-example 和 mars3d-vue-project,在这两个项目中widget都是非常重要的一个模块.通过wi ...

Vue3.0由单页面应用改为多页面开发

Vue3.0由单页面应用改为多页面开发

一、使用vue cli创建一个单页面应用程序

1、在命令行窗口敲如下图命令，输入完成敲回车会自动打开一个vue的管理界面

2、在管理界面中创建项目

二、导入项目项目开始配置

1、使用vue 的相关开发工具导入，导入后的目录结构如下：

三、配置多页面开发(创一个Home页面)

1、在views目录下创建一个home页面如图：（目录是可以自己选择的）

2、APP.vue

3、index.js

三、配置多页面开发(创一个abou页面)

1、在views目录下创建在创建一个about页面如图:

2、App.vue

3、index.js

4、router.js

5、然后在依据上面路由创建3个普通界面，测试路由跳转是否还支持

6、创建一个主的html页面

about.html

7、在vue.config.js中配置该页面：

四、使用工具启动项目

五、最终效果

1、home 界面

2、点击上面abc链接跳转到about页面

3、点击about页面上的page2，下面路由到page2页面

六、打包后的会区分开

Vue3.0由单页面应用改为多页面开发相关推荐

最新文章

热门文章

Vue3.0由单页面应用改为多页面开发

Vue3.0由单页面应用改为多页面开发

一、使用vue cli创建一个单页面应用程序

1、在命令行窗口敲如下图命令，输入完成敲回车会自动打开一个vue的管理界面

2、在管理界面中创建项目

二、导入项目项目开始配置

1、使用vue 的相关开发工具导入，导入后的目录结构如下：

三、配置多页面开发(创一个Home页面)

1、在views目录下创建一个home页面如图： （目录是可以自己选择的）

2、APP.vue

3、index.js

三、配置多页面开发(创一个abou页面)

1、在views目录下创建在创建一个about页面如图:

2、App.vue

3、index.js

4、router.js

5、然后在依据上面路由创建3个普通界面，测试路由跳转是否还支持

6、创建一个主的html页面

about.html

7、在vue.config.js中配置该页面：

四、使用工具启动项目

五、最终效果

1、home 界面

2、点击上面abc链接跳转到about页面

3、点击about页面上的page2，下面路由到page2页面

六、打包后的会区分开

Vue3.0由单页面应用改为多页面开发相关推荐

最新文章

热门文章

1、在views目录下创建一个home页面如图：（目录是可以自己选择的）