详谈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将控件隐藏的方法及display属性介绍
Jul 04 Javascript
调用DOM对象的focus使文本框获得焦点
Feb 19 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
Oct 14 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
Feb 28 Javascript
JavaScript简单实现鼠标移动切换图片的方法
Feb 23 Javascript
JavaScript 中 avalon绑定属性总结
Oct 19 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
Dec 07 Javascript
Javascript中的async awai的用法
May 17 Javascript
深入理解Angularjs 脏值检测
Oct 12 Javascript
vue-cli4项目开启eslint保存时自动格式问题
Jul 13 Javascript
详解node.js 事件循环
Jul 22 Javascript
Vue使用screenfull实现全屏效果
Sep 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
十大“创意”战术!
2020/03/04 星际争霸
详解:――如何将图片储存在数据库里
2006/12/05 PHP
深入理解PHP几个算法:PHP冒泡、PHP二分法、PHP求素数、PHP乘法表
2013/06/06 PHP
PHP 函数call_user_func和call_user_func_array用法详解
2014/03/02 PHP
php获取文章上一页与下一页的方法
2014/12/01 PHP
简单介绍PHP的责任链编程模式
2015/08/11 PHP
CodeIgniter扩展核心类实例详解
2016/01/20 PHP
PHPstorm启用自动换行的方法详解(IDE)
2020/09/17 PHP
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
JQuery扩展插件Validate—4设置错误提示的样式
2011/09/05 Javascript
javascript常用的正则表达式实例
2014/05/15 Javascript
Bootstrap每天必学之警告框插件
2016/04/26 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
2016/05/13 Javascript
Bootstrap CSS布局之代码
2016/12/17 Javascript
详解js中==与===的区别
2017/01/08 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
Node.js中 __dirname 的使用介绍
2017/06/19 Javascript
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
2018/04/01 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
2019/07/25 Javascript
js实现GIF动图分解成多帧图片上传
2019/10/24 Javascript
js实现坦克大战游戏
2020/02/24 Javascript
Javascript confirm多种使用方法解析
2020/09/25 Javascript
[47:45]Liquid vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python正则匹配查询港澳通行证办理进度示例分享
2013/12/27 Python
Python实现中文数字转换为阿拉伯数字的方法示例
2017/05/26 Python
Flask Web开发入门之文件上传(八)
2018/08/17 Python
Python数据库小程序源代码
2019/09/15 Python
Python求解排列中的逆序数个数实例
2020/05/03 Python
CSS3实现曲线阴影和翘边阴影
2016/05/03 HTML / CSS
美国猫狗药物和用品网站:PetCareRx
2017/01/05 全球购物
计算机毕业生自荐信范文
2014/03/23 职场文书
生产文员岗位职责
2014/04/05 职场文书
中学生家长评语大全
2014/04/16 职场文书
清明节网上祭英烈寄语2015
2015/03/04 职场文书
2015年安全生产工作总结范文
2015/04/02 职场文书