多页面配置

最新推荐文章于 2023-07-19 18:52:14 发布
最新推荐文章于 2023-07-19 18:52:14 发布
阅读量403 收藏 1
点赞数
分类专栏： vue element ui 文章标签： elementui vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49471668/article/details/123261176
版权

 1.vue.config.js配置

 pages:{
    index:{
       entry:"./src/main.js",
        template:"./public/index.html",
        filename:"index.html",
        title:"AMControl"
    },
    AMControl:{
        entry:"./src/pages/AMControl/main.js",
        template:"./public/AMControl.html",
        filename:"AMControl.html",
        title:"AMControl"
    },
    TerminalManagement:{
        entry:"./src/pages/TerminalManagement/main.js",
        template:"./public/TerminalManagement.html",
        filename:"TerminalManagement.html",
        title:"TerminalManagement"
    },
}

2.在index.html同级新建AMControl.html和TerminalManagement.html

 AMControl.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>管理后台</title>
  <script type="text/javascript" src="./bmap_offline_demo/map_load.js"></script>
  <script type="text/javascript" src="./bmap_offline_demo/vue-baidu-map.js"></script>

</head>

<body>
  <noscript>
    <strong>We're sorry but vue-element-demo doesn't work properly without JavaScript enabled. Please enable it to
      continue.</strong>
  </noscript>
  <div id="AMControl"></div>
  <!-- built files will be auto injected -->
</body>

</html>

 TerminalManagement.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>管理后台</title>
  <script type="text/javascript" src="./bmap_offline_demo/map_load.js"></script>
  <script type="text/javascript" src="./bmap_offline_demo/vue-baidu-map.js"></script>

</head>

<body>
  <noscript>
    <strong>We're sorry but vue-element-demo doesn't work properly without JavaScript enabled. Please enable it to
      continue.</strong>
  </noscript>
  <div id="Ter"></div>
  <!-- built files will be auto injected -->
</body>
</html>

 3.src建一个文件夹为pages，新建AMControl文件夹，TerminalManagement文件夹

3.在文件夹分别新建App.vue,main.js

AMControl

App.vue

<template>
  <div id="AMControl">
    <transition name="fade" mode="out-in">
       <div>这是AMControl页面</div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'AMControl',
  components: {
  },
  computed:{
  }
}
</script>

<style>
#AMControl {
  font-family: "Microsoft Yahei", "微软雅黑", serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100vw;
  height: 100vh;
  /* text-align: center;
  color: #2c3e50;
  margin-top: 60px; */
}

</style>

main.js

用到什么引入什么，注意路径

import Vue from 'vue'
import store from '../../store/index'
// import Blob from '../src/utils/Blob' 
// import Export2Excel from '../src/utils/Export2Excel'
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// import './assets/styles/reset.css'
import '../../assets/styles/reset.css'
import '../../assets/styles/animation.css'
import '../../assets/styles/common.css'
// import './plugins/element.js'
import '../../plugins/element'
import App from './App.vue'
import router from '../../router'
import '../../plugins/vcharts.js'
import 'swiper/dist/css/swiper.css'
import '@/assets/icons/iconfont.css'
import axios from 'axios';
Vue.prototype.$axios = axios;

Vue.config.productionTip = false

Vue.use(VueAwesomeSwiper)
Vue.prototype.$FileSaver = FileSaver; //设置全局
Vue.prototype.$XLSX = XLSX; //设置全局

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#AMControl')

TerminalManagement中

App.vue

<template>
  <div id="Ter">
    <transition name="fade" mode="out-in">
      <div>
        这是TerminalManagement页面
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: "Ter",
  components: {
  },
  computed: {},
};
</script>

<style>
#Ter{
  font-family: "Microsoft Yahei", "微软雅黑", serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100vw;
  height: 100vh;
  /* text-align: center;
  color: #2c3e50;
  margin-top: 60px; */
}
</style>

main.js

import Vue from 'vue'
import store from '../../store/index'
// import Blob from '../src/utils/Blob' 
// import Export2Excel from '../src/utils/Export2Excel'
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// import './assets/styles/reset.css'
import '../../assets/styles/reset.css'
import '../../assets/styles/animation.css'
import '../../assets/styles/common.css'
// import './plugins/element.js'
import '../../plugins/element'
import App from './App.vue'
import router from '../../router'
import '../../plugins/vcharts.js'
import 'swiper/dist/css/swiper.css'
import '@/assets/icons/iconfont.css'
import axios from 'axios';
Vue.prototype.$axios = axios;

Vue.config.productionTip = false

Vue.use(VueAwesomeSwiper)
Vue.prototype.$FileSaver = FileSaver; //设置全局
Vue.prototype.$XLSX = XLSX; //设置全局

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#Ter')

m0_49471668
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2024年前端最全实战 Vue 之配置多页面应用_vue 多页面，渣本二面阿里受挫
2401_84616230的博客
05-06 695
跳槽是每个人的职业生涯中都要经历的过程，不论你是搜索到的这篇文章还是无意中浏览到的这篇文章，希望你没有白白浪费停留在这里的时间，能给你接下来或者以后的笔试面试带来一些帮助。也许是互联网未来10年中最好的一年。但是如果你不真正的自己去尝试尝试，你永远不知道市面上的行情如何。这次找工作下来，我自身感觉市场并没有那么可怕，也拿到了几个大厂的offer。在此进行一个总结，给自己，也希望能帮助到需要的同学。
vue中main.js讲解
wssy_day的博客
03-18 9005
vue中main.js详情说明
vue-cli多页面配置（vue2.0）
maohe的博客
07-19 3273
给使用vue-cli创建的项目配置成多页面应用。
vue3配置多页面
云霸屏CSDN官方博客
10-13 1187
vue3配置多页面
webpack多页面配置
duan739984186的博客
02-18 1651
wenpack多页面基础配置
vue框架中main.js 入口 引入"模板.js" 中多个方法,以及调用方法
白鲸鱼的博客
11-07 1万+
以计算器为案例 Calculator.html &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot; xmlns:v-on=&quot;http://www.w3.org/1999/xhtml&quot; xmlns:v-bind=&quot;http://www.w3.org/1999/xhtml&quot;&amp;gt; &amp;lt;hea
详解webpack多页面配置记录
08-28
本篇文章主要介绍了详解webpack多页面配置记录，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue项目添加多页面配置的步骤详解
10-16
在Vue项目中，多页面配置是一项重要功能，尤其在大型应用中，可能需要根据不同的业务模块划分多个独立的页面。本文将详细介绍如何在已有的Vue项目中添加多页面配置，无需调整现有目录结构。 首先，我们需要理解为...
Vue-cli3多页面配置详解
11-21
Vue-cli3发布已经好长时间了，笔者也在一直使用，由于公司业务需要要使用多页面配置，于是花时间研究了一下Vue-cli3如何配置多页面。由于Vue-cli3相比之前的版本做了很大的改动，在研究过程中也遇到一些问题。 对于...
Vue3.0配置多页面应用
03-17
Vue3.0是一个备受瞩目的前端框架更新，它引入了许多...总的来说，Vue3.0配置多页面应用是一个涉及项目结构、配置、路由和资源管理的综合过程。合理规划和配置，能够帮助开发者构建出结构清晰、易于维护的大型Web应用。
vue项目文件中的 main.js
北芒的博客
03-31 1万+
1. 干什么的？ 是初始化vue实例并使用需要的插件 并且将你的内容渲染到主页面上 2. 初始内容介绍 import Vue from 'vue' // 引入VUE核心库 import App from './App.vue' // 引入一个当前目录下的名字为App.vue的组件 Vue.config.productionTip = false; // 是否要在生产环境当中给...
vue项目中，main.js,App.vue,index.html如何调用
每天多一点干货
10-31 1万+
1、main.js是我们的入口文件，主要作用是初始化vue实例，并引入所需要的插件 2、App.vue是我们的主组件，所有页面都是在App.vue下进行切换的。其实你也可以理解为所有的路由也是App.vue的子组件。所以我将router标示为App.vue的子组件。 index.html文件入口 src放置组件和入口文件 node_modules为依赖的模块
了解一下vue中main.js
热门推荐
好好学习，天天向上
05-31 3万+
main.js import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) import test from './test' Vue.use(test); Vue.prototype.test = test const routes = [{ path: '/', c...
vue项目配置多入口多出口——方法一
localhost_1314的博客
11-21 1万+
问题引入： 在vue项目中，我们通常使用vue-cli脚手架生成项目，生成的是一个单页面的工程，main.js是整个项目唯一的入口，整个项目都在一个index.html文件中。 但是，有时候，这种默认结构不能满足项目需要 大项目使用单页面负载过重 多页面利于模块独立部署 所以，我们需要将项目配置成多入口多出口 有两种配置方法： 先介绍一种比较笨但是好理解的方法 修改脚手架生成的目录结...
vue项目中main.js配置相关
bqiuer的博客
12-03 2486
main.js配置相关 1、vue import Vue from 'vue' 2、vue-ls :用于从Vue上下文中使用本地Storage，会话Storage和内存Storage import Storage from 'vue-ls' options = { namespace: 'vuejs__', // key键前缀 name: 'ls', // 命名Vue变量.[ls]或this.[$ls], storage: 'local', // 存储名称: session, local,
浅谈vue项目的main.js
immort.L 的博客
12-01 1881
浅谈vue项目启动的加载顺序
vue项目main.js使用方法
weixin_44258964的博客
04-29 9026
vue项目里面main.js文件的基础用法
看vue项目体会（main.js）
菜鸟启程
01-02 721
默认main.js为vue入口文件 import Vue from 'vue' // main.js 为入口文件，并与app.vue组件向关联使此组件为跟组件 // 是所有的内容都在app.vue 上面呈现。 import App from './App' // 在router里配置路由，将app组件相关联 import router from './router' Vue.confi...
vue 页面引入多个内部js_vue如何搭建多页面多系统应用
weixin_39616961的博客
12-22 1050
本文为大家分享了vue如何搭建多页面多系统应用，供大家参考，具体内容如下一、多页面多系统应用1、思路使用Vue搭建多页应用。所有系统都在同一目录下。配置多入口多出口。每个系统之间可以链接。每个系统内依然采用Vue单页应用开发。2、组件复用性可以将所有的系统公共组件放到系统目录最外面，以达到组件复用。在系统内部依然将自己独立的组件封装，复用。这样可以最大限度的提高组件的复用性。3、路由每个系统单独进...
vite2多页面配置
最新发布
09-01
vite2是一个现代化的前端构建工具，它支持多页面配置，允许开发者在同一个项目中创建多个页面。 使用vite2的多页面配置需要进行以下步骤： 1. 在项目的根目录下创建一个`pages`文件夹（也可以使用其他名称）作为存放页面文件的目录。 2. 在`pages`文件夹中创建多个以`.vue`结尾的文件，每个文件代表一个页面。例如，我们可以创建一个`home.vue`和一个`about.vue`。 3. 在项目的根目录下的`vite.config.js`文件中进行配置。在`build`对象中添加一个`rollupOptions.input`属性，并将值设置为一个对象，键为各个页面名称，值为对应的页面文件路径。例如： ```javascript export default { // ... build: { rollupOptions: { input: { home: '/path/to/home.vue', about: '/path/to/about.vue', } } } } ``` 其中`/path/to/`需要替换为实际页面文件的路径。 4. 运行`npm run build`命令来进行项目构建。构建完成后，会在输出目录（默认为`dist`文件夹）中生成多个页面文件。 通过以上步骤配置好了vite2的多页面后，我们就可以在浏览器中访问不同的页面了。例如，可以通过`http://localhost:3000/home.html`来访问`home.vue`对应的页面。 除了上述配置外，还可以在`vite.config.js`中使用`html`插件来对每个页面进行更详细的配置，如设置模板、指定输出文件名等。具体可参考vite2官方文档。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值