详谈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之间的区别就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用vue-router在Vue页面之间传递数据的方法

    前言 几周前,我写了关于 Vue 路由的使用和在 Vue 页面导航的文章.这是在应用程序中探索的一个基本例子. 通常,在将导航构建到应用程序中时,您会发现需要将数据从一个页面传递到另一个页面.(不通顺)例如,您遵循 master-detail 模式,其中您有一个数据列表,通过更深入地挖掘可以获得关于列表中特定项的更多信息. 我们将学习如何使用路由和 URL参数以及查询参数在 Vue 页面之间传递数据. 如果你还没有读过我之前的教程或者不熟悉 vue-router 库,我建议你温习一下. 利用 U

  • Vue组件跨层级获取组件操作

    this.$parent 访问父实例 this.$children 当前实例的直接子组件.(不保证顺序,不是响应式) this.$parent.$parent.$refs.xxx 跨级访问父组件 this.$children.$children.$refs.xxx 跨级访问子组件 这种递归的方式 代码繁琐 性能低效 ref 只能获取当前组件上下文组件 无法跨层级 ref 是字符串 被用来给元素或子组件注册引用信息. 引用信息将会注册在父组件的 $refs 对象上. 如果在普通的 DOM 元素上使

  • 基于Vue全局组件与局部组件的区别说明

    1.组件声明 <!-- 全局组件模板father模板 --> <template id="father"> <div> <h3>这是{{name}}</h1> <div> <p>这是{{data}}</p> </div> </div> </template> var FATHER = { template: "#father", dat

  • Vue CLI3基础学习之pages构建多页应用

    Vue CLI3基础学习之pages构建多页应用

    前言 首先我们可以把多页应用理解为由多个单页构成的应用,而何谓多个单页呢?其实你可以把一个单页看成是一个 html 文件,那么多个单页便是多个 html 文件,多页应用便是由多个 html 组成的应用,如下图所示 既然多页应用拥有多个 html ,那么同样其应该拥有多个独立的入口文件.组件.路由. vuex 等.没错,说简单一点就是多页应用的每个单页都可以拥有单页应用 src 目录下的文件及功能,我们来看一下一个基础多页应用的目录结构 ├── node_modules              

  • 详谈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属性,意

  • vue中计算属性（computed）、methods和watched之间的区别

    前言 本文主要给大家介绍了关于vue中计算属性(computed).methods和watched之间的区别,分享出来供大家参考学习,下面来一起看看详细的介绍: 计算属性 和普通属性一样是在模板中绑定计算属性的,当data中对应数据发生改变时,计算属性的值也会发生改变. Methods methods是方法,只要调用它,函数就会执行. 相同:两者达到的效果是同样的. 不同:计算属性是基于它们的依赖进行缓存的,只有相关依赖会发生改变时才会重新求职.只要相关依赖未改变,只会返回之前的结果,不再执行函

  • 部署Python的框架下的web app的详细教程

    部署Python的框架下的web app的详细教程

    作为一个合格的开发者,在本地环境下完成开发还远远不够,我们需要把Web App部署到远程服务器上,这样,广大用户才能访问到网站. 很多做开发的同学把部署这件事情看成是运维同学的工作,这种看法是完全错误的.首先,最近流行DevOps理念,就是说,开发和运维要变成一个整体.其次,运维的难度,其实跟开发质量有很大的关系.代码写得垃圾,运维再好也架不住天天挂掉.最后,DevOps理念需要把运维.监控等功能融入到开发中.你想服务器升级时不中断用户服务?那就得在开发时考虑到这一点. 下面,我们就来把awes

  • vue项目中,main.js,App.vue,index.html的调用方法

    如下所示: 1.main.js是我们的入口文件,主要作用是初始化vue实例,并引入所需要的插件 2.App.vue是我们的主组件,所有页面都是在App.vue下进行切换的.其实你也可以理解为所有的路由也是App.vue的子组件.所以我将router标示为App.vue的子组件. 1.index.html文件入口 2.src放置组件和入口文件 3.node_modules为依赖的模块 4.config中配置了路径端口值等 5.build中配置了webpack的基本配置.开发环境配置.生产环境配置等

  • vue 使用mescroll.js框架实现下拉加载和上拉刷新功能

    以下是代码是在项目中抽取出来的,都是实现下拉刷新上拉加载的要点. 注:以下不是用vue-cli写的,用vue-cli的请绕过,抱歉~ 1.mescroll 的页面的初始化 initMescroll(){ var _this = this; this.mescroll = new MeScroll("mescroll",{ down:{ callback: _this.downCallback //下拉刷新的回调函数 }, up:{ callback: _this.upCallback,

  • 什么是Vue.js框架 为什么选择它？(第一课)

    什么是Vue.js框架 为什么选择它？(第一课)

    "大白话,讲编程"系列又回来了,这个系列我们一起学习的是Vue.js基础知识.你没看错,是基础知识.所以,哪怕你入行不久,相信你在的大白话风格下,也能学会. 但还是希望你有开发过html,css,javascript的项目经验,如果你连一点项目经验都没有,亦或者你早已掌握Vue.js的知识,那么这个系列不适合你当前的学习阶段. 1 学习目标 通过这一节,你会学会: 1.目前前端技术使用的趋势 2.什么是MVVM 3.Vue.js的优点 4.Vue.js的两大核心 5.Vue.js的适用

  • JS框架之vue.js(深入三:组件1）

    这个要单独写,原文是这么描述vue的组件的:组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 这个特性我感觉比较难理解,一步步来,看看组件到底是个什么东西? 1.举个栗子 //model层: // 通过extend方式定义一个Vue组件 var MyComponent = Vue.exten

  • Vue.js框架路由使用方法实例详解

    Vue.js框架路由使用方法实例详解

    Vue.js框架路由使用方法实例详解 html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name='viewport' content='width=device-width,initial-

  • 利用Vue.js框架实现火车票查询系统（附源码）

    利用Vue.js框架实现火车票查询系统（附源码）

    前言 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js 今天,我就要基于这个库来搭建一个火车票查询系统.首先我们的机器上得有NodeJS环境,并且安装了npm包管理工具.因为vue是跑在node环境下的,并且我们需要用npm来安装vue. 在终端输入npm install --global vue-cli我们来全局安装vue-cli

  • 深入浅析nuxt.js基于ssh的vue通用框架

    Nuxt.js 是一个基于 Vue.js 的通用应用框架. 通过对客户端/服务端基础架构的抽象组织, Nuxt.js 主要关注的是应用的 UI渲染. SSR ,即服务器渲染,就是在服务器端将对Vue页面进行渲染生成html文件,将html页面传递给浏览器. Nuxt.js是特点(优点): 基于 Vue.js 自动代码分层 服务端渲染 强大的路由功能,支持异步数据 静态文件服务 ES6/ES7 语法支持 打包和压缩 JS 和 CSS HTML头部标签管理 本地开发支持热加载 集成ESLint 支持

随机推荐