详谈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 相关文章推荐
[转]JS宝典学习笔记
Feb 07 Javascript
JavaScript 变量命名规则
Sep 23 Javascript
使用jQuery的将桌面应用程序引入浏览器
Nov 19 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
Aug 02 Javascript
js获取某元素的class里面的css属性值代码
Jan 16 Javascript
详解JavaScript操作HTML DOM的基本方式
Oct 21 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 Javascript
JavaScript基础之this详解
Jun 04 Javascript
详解Vue2.0组件的继承与扩展
Nov 23 Javascript
详解JavaScript作用域和作用域链
Mar 19 Javascript
layui在form表单页面通过Validform加入简单验证的方法
Sep 06 Javascript
详解如何在Canvas中添加事件的方法
Apr 17 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
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
php递归获取目录内文件(包含子目录)封装类分享
2013/12/25 PHP
简要剖析PHP的Yii框架的组件化机制的基本知识
2016/03/17 PHP
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
js日历功能对象
2012/01/12 Javascript
js打开windows上的可执行文件示例
2014/05/27 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
JS面向对象编程详解
2016/03/06 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
2016/05/17 Javascript
jQuery四种选择器使用及示例
2016/06/05 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
2016/08/15 Javascript
jQuery弹出遮罩层效果完整示例
2016/09/13 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
vuex实现简易计数器
2016/10/27 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
Vue.js之slot深度复制详解
2017/03/10 Javascript
vue中如何引入jQuery和Bootstrap
2017/04/10 jQuery
小程序绑定用户方案优化小结
2019/05/15 Javascript
Python编程中运用闭包时所需要注意的一些地方
2015/05/02 Python
python中__slots__用法实例
2015/06/04 Python
django中的setting最佳配置小结
2017/11/21 Python
Python 将pdf转成图片的方法
2018/04/23 Python
基于python绘制科赫雪花
2018/06/22 Python
tensorflow 中对数组元素的操作方法
2018/07/27 Python
python爬虫爬取网页数据并解析数据
2020/09/18 Python
HTML5表格_动力节点Java学院整理
2017/07/11 HTML / CSS
美国婴儿服装购物网站:Gerber Childrenswear
2020/05/06 全球购物
.net C#面试题
2012/08/28 面试题
城市规划应届毕业生自荐信
2014/07/04 职场文书
平安工地汇报材料
2014/08/19 职场文书
2014年团支书工作总结
2014/11/14 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
2015年小学美术工作总结
2015/05/25 职场文书
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
2021/06/26 Python
Java 多线程协作作业之信号同步
2022/05/11 Java/Android