详谈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 相关文章推荐
Jquery在IE7下无法使用 $.ajax解决方法
Nov 11 Javascript
Extjs中使用extend(js继承) 的代码
Mar 15 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
May 07 Javascript
jquery控制display属性为none或block
Mar 31 Javascript
JavaScript中的eval()函数使用介绍
Dec 31 Javascript
JavaScript必知必会(十) call apply bind的用法说明
Jun 08 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
Sep 13 Javascript
js通过classname来获取元素的方法
Nov 24 Javascript
javascript 网页进度条简单实例
Feb 22 Javascript
JS SetInterval 代码实现页面轮询
Aug 11 Javascript
在微信小程序中使用图表的方法示例
Apr 25 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
Sep 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
discuz的php防止sql注入函数
2011/01/17 PHP
分享PHP计算两个日期相差天数的代码
2015/12/23 PHP
javascript的onchange事件与jQuery的change()方法比较
2009/09/28 Javascript
javascript 在网页中的运用(asp.net)
2009/11/23 Javascript
js 获取时间间隔实现代码
2014/05/12 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
2014/05/16 Javascript
js限制checkbox选中个数以限制六个为例
2014/07/15 Javascript
AngularJS内置指令
2015/02/04 Javascript
JavaScript数组随机排列实现随机洗牌功能
2015/03/19 Javascript
javascript每日必学之封装
2016/02/23 Javascript
AngularJS入门教程之Select(选择框)详解
2016/07/27 Javascript
JavaScript中push(),join() 函数 实例详解
2016/09/06 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
2016/10/27 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
javascript实现数字配对游戏的实例讲解
2017/12/14 Javascript
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
微信小程序云开发之使用云数据库
2019/05/17 Javascript
Python配置文件解析模块ConfigParser使用实例
2015/04/13 Python
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
Django中ajax发送post请求 报403错误CSRF验证失败解决方案
2019/08/13 Python
python+rsync精确同步指定格式文件
2019/08/29 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
TensorBoard 计算图的可视化实现
2020/02/15 Python
关于win10在tensorflow的安装及在pycharm中运行步骤详解
2020/03/16 Python
python使用smtplib模块发送邮件
2020/12/17 Python
澳大利亚最受欢迎的美发用品目的地:AMR
2019/08/28 全球购物
计算机软件个人的自荐信范文
2013/12/01 职场文书
库房主管岗位职责
2013/12/31 职场文书
打架检讨书400字
2014/01/17 职场文书
经济贸易系毕业生求职信
2014/05/31 职场文书
2015年乡镇工会工作总结
2015/05/19 职场文书
go语言中GOPATH GOROOT的作用和设置方式
2021/05/05 Golang
公历12个月名称的由来
2022/04/12 杂记