热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别

如下所示:1.index.html文件入口;2.src放置组件和入口文件;3.node_modules为依赖的模块;4.cofig中配置了路径端口值等;5.build中配置了webback的基本配置、开发环境配置、生产环境配置等。main.j

如下所示:

1.index.html文件入口;

2.src放置组件和入口文件;

3.node_modules为依赖的模块;

4.cofig中配置了路径端口值等;

5.build中配置了webback的基本配置、开发环境配置、生产环境配置等。

main.js是我们的入口文件,主要用于初始化vue实例,并使用需要的插件。

App.vue是我们的主组件,所有的页面都在App.vue下进行切换。我们可以将router标示为App.vue的子组件。

6.在每个模板中给style设置一个scoped属性,意为该style的属性只对这个组件起作用,不会影响到其他组件中含有相同class的元素。

补充知识:VUE 路由配置(包含main.js index.js APP.vue 三大配置)

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
 
Vue.use(Element);
Vue.config.productiOnTip= false
 
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 components: { App },
 template: ''
})

src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../components/Login'
Vue.use(Router)
 
export default new Router({
 routes: [
  {
   path: '/Login',
   name: 'Login',
   component: Login
  },
  {
   path:"/login1",
   component:() => import('@/components/login1.vue')
  }
 ],
 mode: "history"https://干掉地址栏里边的#号键
})

App.vue 展示Vue


 

以上这篇详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。


推荐阅读
  • 深入浅出 webpack 系列(二):实现 PostCSS 代码的编译与优化
    在前一篇文章中,我们探讨了如何通过基础配置使 Webpack 完成 ES6 代码的编译。本文将深入讲解如何利用 Webpack 实现 PostCSS 代码的编译与优化,包括配置相关插件和加载器,以提升开发效率和代码质量。我们将详细介绍每个步骤,并提供实用示例,帮助读者更好地理解和应用这些技术。 ... [详细]
  • 如何使用ES6语法编写Webpack配置文件? ... [详细]
  • 作为软件工程专业的学生,我深知课堂上教师讲解速度之快,很多时候需要课后自行消化和巩固。因此,撰写这篇Java Web开发入门教程,旨在帮助初学者更好地理解和掌握基础知识。通过详细记录学习过程,希望能为更多像我一样在基础方面还有待提升的学员提供有益的参考。 ... [详细]
  • Vue应用预渲染技术详解与实践 ... [详细]
  • 用阿里云的免费 SSL 证书让网站从 HTTP 换成 HTTPS
    HTTP协议是不加密传输数据的,也就是用户跟你的网站之间传递数据有可能在途中被截获,破解传递的真实内容,所以使用不加密的HTTP的网站是不 ... [详细]
  • Spring – Bean Life Cycle
    Spring – Bean Life Cycle ... [详细]
  • 深入解析HTML5字符集属性:charset与defaultCharset
    本文将详细介绍HTML5中新增的字符集属性charset和defaultCharset,帮助开发者更好地理解和应用这些属性,以确保网页在不同环境下的正确显示。 ... [详细]
  • Python 数据可视化实战指南
    本文详细介绍如何使用 Python 进行数据可视化,涵盖从环境搭建到具体实例的全过程。 ... [详细]
  • 网站访问全流程解析
    本文详细介绍了从用户在浏览器中输入一个域名(如www.yy.com)到页面完全展示的整个过程,包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]
  • [转]doc,ppt,xls文件格式转PDF格式http:blog.csdn.netlee353086articledetails7920355确实好用。需要注意的是#import ... [详细]
  • Framework7:构建跨平台移动应用的高效框架
    Framework7 是一个开源免费的框架,适用于开发混合移动应用(原生与HTML混合)或iOS&Android风格的Web应用。此外,它还可以作为原型开发工具,帮助开发者快速创建应用原型。 ... [详细]
  • 本文介绍了如何使用 CMD 批处理脚本进行文件操作,包括将指定目录下的 PHP 文件重命名为 HTML 文件,并将这些文件复制到另一个目录。 ... [详细]
  • 本文详细介绍了如何使用Python中的smtplib库来发送带有附件的邮件,并提供了完整的代码示例。作者:多测师_王sir,时间:2020年5月20日 17:24,微信:15367499889,公司:上海多测师信息有限公司。 ... [详细]
  • 本文深入探讨了MDK链接脚本的应用与优化技巧。首先,文章介绍了链接脚本的基本概念及其在嵌入式系统开发中的重要性。接着,通过具体实例详细分析了链接脚本的结构和功能,特别是在程序在FLASH中运行时,如何优化链接脚本以提高系统性能。此外,文章还讨论了无需将程序加载到SRAM中的技术细节,为开发者提供了实用的参考和指导。 ... [详细]
  • 通过优化动态网络Cookies的全网互通机制,实现了用户在任意子站点的登录和注销操作均能同步至整个网络。具体实现涉及对三个关键文件的修改:首先,在`incDv_ClsMain.asp`中定位并调整`Response.Cookies`的相关设置;其次,更新`global.asa`以确保会话状态的一致性;最后,修改`login.asp`以支持跨域认证。这一改进不仅提升了用户体验,还增强了系统的安全性和可靠性。 ... [详细]
author-avatar
Yunir_944
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有