对main.js App.vue 等进行操作:

  但是这就出现了一个问题:什么是main.js,他主要干什么用的?App.vue又是干什么用的?main.js 里面的import from又在干嘛?newVue({})是干嘛的?里面又需要什么参数,它到底能干什么。在网上搜了一篇博文,解答一些初级的困惑。

  一、什么是main.js?里面一般都是些什么内容?

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

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

    2.import from 是干嘛的呢?

    实际上,importfrom是ES6语法里面的。因为相关知识很多,具体参见博客里ES6里面的import,export。

    在这里只是给大家介绍下它在这里的用处。

    a.

import Vue from 'vue';

    其实最完整的写法是:

              

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

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

  b.

import App from './App';

    其实最完整的写法是:

import App from './App.vue';

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

  c.还可以有

    import router from './route';    ---------      import router from './route.js';
      import axios from 'axios';     --------      import axios from '..\node_modules\axios\dist\axios.js';
   import './less/index';      --------      import './less/index.less';
 小结:在简书上看到有一个人总结的很好:
      1.import...from...的from命令后面可以跟很多路径格式,若只给出vue,axios这样的包名,则会自动到node_modules中加载;若给出相对路径及文件前缀,则到指定位置寻找。
      2.可以加载各种各样的文件:.js、.vue、.less等等。
      3.可以省略掉from直接引入。

     下面附作者原文:
            作者:趁你还年轻233
            链接:https://www.jianshu.com/p/c0be35475e54
            來源:简书

  二、App.vue又是干什么用的?

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

<template>
<div id="app">
<img src="./assets/logo.png">
<hello></hello>
</div>
</template> <script>
import Hello from './components/Hello' export default {
name: 'app',
components: {
Hello
}
}
</script> <style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</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
} ]
})

  这里还有一些其他的文件意思:

  1. index.html文件入口

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

  3. node_modules为依赖的模块

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

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

vue2.0:项目开始,首页入门(main.js,App.vue,importfrom)的更多相关文章

  1. vue项目中,main.js,App.vue,index.html如何调用

    1.main.js是我们的入口文件,主要作用是初始化vue实例,并引入所需要的插件 2.App.vue是我们的主组件,所有页面都是在App.vue下进行切换的.其实你也可以理解为所有的路由也是App. ...

  2. 【vue】index.html main.js app.vue index.js怎么结合的? 怎么打包的?搜集的信息

    转载:https://blog.csdn.net/yudiandemingzi/article/details/80247137 怎么结合的: 一.启动项目 第一步:cmd进入项目文件里,运行npm ...

  3. vue-cli中的index.html ,main.js , App.vue的关系

    ###发现不少小伙伴才刚开始接触到这个结构都被绕的迷糊,而发现很多人说的也不是那么准确,那么下面我来说一下是怎么回事### 1.首先我们来看看原生Vue中组件的写法, 我们按照vue-cli的结构按照 ...

  4. vue2.0:(三)、项目开始,首页入门(main.js,App.vue,importfrom)

    接下来,就需要对main.js App.vue 等进行操作了. 但是这就出现了一个问题:什么是main.js,他主要干什么用的?App.vue又是干什么用的?main.js 里面的import fro ...

  5. 从零开始搭建Vue2.0项目(一)之快速开始

    从零开始搭建Vue2.0项目(一)之项目快速开始 前言 该样板适用于大型,严肃的项目,并假定您对Webpack和有所了解vue-loader.确保还阅读vue-loader的文档,了解常见的工作流程配 ...

  6. webpack+vue2.0项目 (二)热加载,vue-router

    目录创建好之后,命令行输入 npm run dev 因为在配置文件config/index.js里: dev: { env: require('./dev.env'), port: 8080, aut ...

  7. 如何在其他js 引入main.js 中 vue 的实例?

    1.原因解析 经测试发现,代码先执行了 index.js >>  main.js >> Home.vue scr/api/index.js src/main.js src/co ...

  8. Vue2.0 【第二季】第4节 Vue的生命周期(钩子函数)

    目录 Vue2.0 [第二季]第4节 Vue的生命周期(钩子函数) 第4节 Vue的生命周期(钩子函数) Vue2.0 [第二季]第4节 Vue的生命周期(钩子函数) 第4节 Vue的生命周期(钩子函 ...

  9. Vue2.0 【第二季】第3节 Vue.set全局操作

    目录 Vue2.0 [第二季]第3节 Vue.set全局操作 第3节:Vue.set全局操作 一.引用构造器外部数据 二.在外部改变数据的三种方法: 三.为什么要有Vue.set的存在? Vue2.0 ...

随机推荐

  1. numpy和pandas的基础索引切片

    Numpy的索引切片 索引 In [72]: arr = np.array([[[1,1,1],[2,2,2]],[[3,3,3],[4,4,4]]]) In [73]: arr Out[73]: a ...

  2. SQL提高性能

    1.对外键建立索引,大数据量时性能提高明显(建索引可以直接[Merge Join],否则还须在查询时生成HASH表作[Hash Join]) 2.尽量少使用inner join,使用left join ...

  3. CentOS 7上Docker的安装

    一.安装docker 1.Docker 要求 CentOS 系统的内核版本高于 3.10 ,查看本页面的前提条件来验证你的CentOS 版本是否支持 Docker . 通过 uname -r 命令查看 ...

  4. Docker的部署安装(CentOS)-by paymob

    环境准备 通过命令查看系统版本和内核版本等信息 [gmuser@--- ~]$ cat /etc/redhat-release CentOS Linux release (Core) [gmuser@ ...

  5. Yii2创建管理员登录

    1. 创建管理员表 进入项目根目录,在根目录执行命令: 1 $ ./yii migrate 2. 创建管理的控制器 1 $ cd console/controllers/ 编写代码如下: 123456 ...

  6. 从Surface 3发布 看微软快速转向的根由

    3发布 看微软快速转向的根由" title="从Surface 3发布 看微软快速转向的根由"> 平地一声惊雷起,微软突然送惊喜!在毫无征兆的情况下,微软突然发布一 ...

  7. Java并发编程入门与高并发面试(三):线程安全性-原子性-CAS(CAS的ABA问题)

    摘要:本文介绍线程的安全性,原子性,java.lang.Number包下的类与CAS操作,synchronized锁,和原子性操作各方法间的对比. 线程安全性 线程安全? 线程安全性? 原子性 Ato ...

  8. js中的call

    //例1 <script> window.color = 'red'; document.color = 'yellow'; var s1 = {color: 'blue' }; func ...

  9. Windows server 2008 r2下安装sqlserver2012

    在微软官网上下载sqlserver2012镜像文件:用Alcohol 120%软件进行驱动安装. 如果C盘的容量不够的话,上边的路径可以修改

  10. 云服务器——之Linux下安装tomcat

    在上一篇文章中已经准备好了tomcat安装的基本环境jdk的安装,那么我们现在来记录tomcat的安装. 第一步:下载tomcat安装包 http://tomcat.apache.org/ 第二步:通 ...