VUE项目中main.js、App.vue、import...from...等重要文件的作用和意义

摘要:
示例2:importAppfrom“/App”;事实上,最完整的方法是:importAppfrom/应用vue';意思实际上是介绍我们编写的Vue文件。示例3:importrouterfrom'/route“--------importrouterfrom”./route。js';来自“xios”的重要信息;--------来自..ode_模块的importxios。js';import”/小于/索引';--------import'./less/索引。小于';Import…from…摘要:1.Import…from…的from命令可以后跟许多路径格式。如果只提供了vue、axios、less等包名,它将自动转到node_在模块中找到,并在找到时加载;如果给定了相对路径和文件前缀,请转到指定位置查找它们;2.可以加载各种文件:。js、,。vue、,。更少等。

一、main.js

   1、 main.js 程序入口文件,初始化vue实例,并引入使用需要的插件和各种公共组件.

import Vue from 'vue'
import App from './App'
import router from './router'
import Less from 'Less'
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

  new Vue代表新建vue对象

    el官方解释:为实例提供挂载元素。值可以是 CSS 选择符,或实际 HTML 元素,或返回 HTML 元素的函数。这里就通过index.html中的<div id="app"><div>中的id=“app”和这里的“#app”进行挂载。

    components:代表组件。这里的App,实际是App:App的省略写法,template里使用的 <App/>标签来自组件App。

    template:代表模板。官方解释:模板将会替换挂载的元素。挂载元素的内容都将被忽略。

 也就是说:template: '<App/>' 表示用<app></app>替换index.html里面的<div id="app"></div>

      例:

  我们把main中components这行注释掉:

     VUE项目中main.js、App.vue、import...from...等重要文件的作用和意义第1张

    再看页面:发现里面就有一个<app></app>标签。

 VUE项目中main.js、App.vue、import...from...等重要文件的作用和意义第2张

 main.js中new Vue对象中写入router,实际上是router:router,作用是main.js引入了router对象,根据路由的配置方法,需要将router对象加载到根main..js中。

、import...from...

  import...from...是ES6语法里面的新特性,用来引入外部文件

  例1:

import Vue from 'vue';

    其实最完整的写法是:

              VUE项目中main.js、App.vue、import...from...等重要文件的作用和意义第3张

import Vue from "../node_modules/vue/dist/vue.js";

     意思是:因为main.js是在src文件中,所以../向前一级相对目录查找node_modules,再依次寻找后面的文件。

  例2:

import App from './App';

    其实最完整的写法是:

import App from './App.vue';

    意思其实就是引入我们写好的.vue文件。

 例3:

    import router from './route';    ---------      import router from './route.js';
      import axios from 'axios';     --------      import axios from '..
ode_modulesaxiosdistaxios.js';
   import './less/index';      --------      import './less/index.less';
import...from...总结:
   1.import...from...的from命令后面可以跟很多路径格式,若只给出vue,axios,less这样的包名,则会自动到node_modules中查到,找到后则加载;若给出相对路径及文件前缀,则到指定位置寻找;
   2.可以加载各种各样的文件:.js、.vue、.less等等。

三、App.vue

    App.vue是项目的主组件,页面入口文件 ,所有页面都在App.vue下进行切换,app.vue负责构建定义及页面组件归集。

<template>
  <div id="app">
    <img   src="http://t.zoukankan.com/assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style lang="less">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 160px;
  .img{
     200px;
  }
}
</style>

  

四、router文件夹里的index.js

  router里的index.js 把准备好路由组件注册到路由里:

复制代码
import Vue from 'vue'
import Router from 'vue-router'
import Recommed from 'components/recommend/recommend'
import Singer from 'components/singer/singer'
import Rank from 'components/rank/rank'
import Search from 'components/search/search'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: Recommed
    },
    {
      path: '/recommend',
      component: Recommed
    },
    {
      path: '/singer',
      component: Singer
    },
    {
      path: '/rank',
      component: Rank
    },
    {
      path: '/search',
      component: Search
    }

  ]
})
复制代码

五、veu项目里其他的文件作用:

  1. index.html:vue编译后的html文件入口

  2. src:放置组件和入口文件

  3. node_modules:项目锁依赖的模块/包

  4. config:配置了路径端口值等

  5. build:配置webpack的基本配置、开发环境配置、生产环境配置等

免责声明:文章转载自《VUE项目中main.js、App.vue、import...from...等重要文件的作用和意义》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇JMeter学习笔记--性能测试理论rokectMq下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

智能手机+DIY红外=万能遥控器

目前好像只有:三星S4.,努比亚大牛,华为荣耀3等几款新机才有红外遥控功能,那我们使用的手机没有这个功能怎么办?不要急我有办法呵呵,本次DIY材料好找又简单,大家都可以亲自试一试!DIY材料:红外二极管2个(没有可以在旧的遥控器上拆),3.5耳机插头一个制作方法:如下图(我辛苦做的图不要盗用哦,给个赞吧!)DIY开始:两个红外二极管反向并到一起焊接焊到3....

性能测试题总结(二)

如何理解压力、负载、性能测试测试? 性能测试是一个较大的范围,实际上性能测试本身包含了性能、强度、压力、负载等多方面的测试内容。 压力测试是对服务器的稳定性以及负载能力等方面的测试,是一种很平常的测试。增大访问系统的用户数量、或者几个用户进行大数据量操作都是压力测试。而负载测试是压力相对较大的测试,主要是测试系统在一种或者集中极限条件下的相应能力,是性能测...

解决vscode格式化vue文件出现的问题

遇到的问题 使用vscode开发vue项目的时候,格式化vue文件,与自己配置的eslint标准会有冲突。 引号问题:单引号变双引号 分号问题:行末是否加分号。自动加/减分号 当然还会有其他个性化冲突,只需要找到怎么修改,就好办了。 说明 vscode格式化文件,使用的是快捷键shift + alt + f 而我安装了vetur插件来格式化vue文件。...

UNIAPP 离线打包 ANDROID APK

需要先安装好环境   Android Studio  HBuilderX    HBuilderX 用于把项目打包成APP资源,Android Studio生成APK. 下载App离线SDK    uniapp官网下载地址:https://nativesupport.dcloud.net.cn/AppDocs/download/android   下载最...

使用create-react-app构建的项目(并引入react-app-polyfill做IE兼容)在开发环境下的IE浏览器中报错的解决方案

个人所负责的一个项目,需要兼容IE11,所以已经按照react-app-polyfill官方指定的方案进行兼容配置即在项目src/index.js中: //The first lines in src/index.js import 'react-app-polyfill/ie11'; import 'react-app-polyfill/stable';...

利用xshell远程连接centos安装oracle11g时在图形界面登录

1.首先给centos安装桌面环境。(yum groupinstall ‘GNOME Desktop’) 2.安装Xmanager软件 3.打开xshell,新建连接 填好主机和名称后,点击左侧连接-》SSH-》隧道进入下面的界面 在X11转移勾选如上图所示,点击确定,然后在弹出的框填入用户名和密码即可。...