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


Posted in Javascript onAugust 12, 2020

如下所示:

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

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: '<App/>'
})

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"//干掉地址栏里边的#号键
})

App.vue 展示Vue

<template>
<div id="app">
<router-view />
</div>
</template>
 
<script>
export default {
 name: 'App', 
 data () {
    return {
     
    }
 }
}
</script>
<style>
</style>

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

Javascript 相关文章推荐
屏蔽F1~F12的快捷键的js函数
May 06 Javascript
javascript向flash swf文件传递参数值注意细节
Dec 11 Javascript
jquery实现多行文字图片滚动效果示例代码
Oct 10 Javascript
JavaScript设计模式之适配器模式介绍
Dec 28 Javascript
javascript与css3动画结合使用小结
Mar 11 Javascript
JS继承之借用构造函数继承和组合继承
Sep 07 Javascript
jQuery Ajax前后端使用JSON进行交互示例
Mar 17 Javascript
vue2.X组件学习心得(新手必看篇)
Jul 05 Javascript
KOA+egg.js集成kafka消息队列的示例
Nov 09 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
Mar 14 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
Jun 17 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
Oct 27 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
Aug 13 #Javascript
VsCode里的Vue模板的实现
Aug 12 #Javascript
typescript配置alias的详细步骤
Aug 12 #Javascript
js实现表格单列按字母排序
Aug 12 #Javascript
javascript的hashCode函数实现代码小结
Aug 11 #Javascript
vue axios封装httpjs,接口公用配置拦截操作
Aug 11 #Javascript
解决vue刷新页面以后丢失store的数据问题
Aug 11 #Javascript
You might like
PHP mail()函数使用及配置方法
2014/01/14 PHP
PHP中的事务使用实例
2015/05/26 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
基于ThinkPHP实现的日历功能实例详解
2017/04/15 PHP
js鼠标左右键 键盘值小结
2010/06/11 Javascript
javascript获取隐藏dom的宽高 具体实现
2013/07/14 Javascript
js和css写一个可以自动隐藏的悬浮框
2014/03/05 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
2014/10/20 Javascript
JavaScript window.location对象
2014/11/14 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
微信小程序button组件使用详解
2018/01/31 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
利用Vue实现简易播放器的完整代码
2020/12/30 Vue.js
[58:58]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第二场
2018/04/05 DOTA
Python导出DBF文件到Excel的方法
2015/07/25 Python
pandas DataFrame数据转为list的方法
2018/04/11 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
关于pytorch中全连接神经网络搭建两种模式详解
2020/01/14 Python
Pytorch中的VGG实现修改最后一层FC
2020/01/15 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
调整Jupyter notebook的启动目录操作
2020/04/10 Python
pymongo insert_many 批量插入的实例
2020/12/05 Python
CSS3 文字动画效果
2020/11/12 HTML / CSS
HTML5 canvas基本绘图之绘制矩形
2016/06/27 HTML / CSS
MIXIT官网:俄罗斯最大的化妆品公司之一
2020/01/25 全球购物
俄罗斯奢侈品牌衣服、鞋子和配饰的在线商店:INTERMODA
2020/07/17 全球购物
军人违纪检讨书
2014/02/04 职场文书
师范类求职信
2014/06/21 职场文书
学校食堂标语
2014/10/06 职场文书
普通党员自我剖析材料
2014/10/07 职场文书
2014年城市管理工作总结
2014/12/02 职场文书
2015年幼儿园班务工作总结
2015/05/12 职场文书
周一问候语大全
2015/11/10 职场文书
Python正则表达式中flags参数的实例详解
2022/04/01 Python