• vue2.0:项目开始-首页入门(main.js,App.vue,import...from)


    原文参考 https://blog.csdn.net/qq_20757489/article/details/84781188

    接下来,就需要对main.js App.vue 等进行操作了。

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

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

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

    1.  
      import Vue from 'vue'
    2.  
      import App from './App'
    3.  
      import router from './router'
    4.  
       
    5.  
      Vue.config.productionTip = false
    6.  
       
    7.  
      /* eslint-disable no-new */
    8.  
      new Vue({
    9.  
      el: '#app',
    10.  
      router,
    11.  
      components: { App },
    12.  
      template: '<App/>'
    13.  
      })

        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.还可以有

    1.  
      import router from './route'; --------- import router from './route.js';
    2.  
      import axios from 'axios'; -------- import axios from '.. ode_modulesaxiosdistaxios.js';
    3.  
      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负责构建定义及页面组件归集。

    1.  
      <template>
    2.  
      <div id="app">
    3.  
      <img src="./assets/logo.png">
    4.  
      <hello></hello>
    5.  
      </div>
    6.  
      </template>
    7.  
       
    8.  
      <script>
    9.  
      import Hello from './components/Hello'
    10.  
       
    11.  
      export default {
    12.  
      name: 'app',
    13.  
      components: {
    14.  
      Hello
    15.  
      }
    16.  
      }
    17.  
      </script>
    18.  
       
    19.  
      <style>
    20.  
      #app {
    21.  
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
    22.  
      -webkit-font-smoothing: antialiased;
    23.  
      -moz-osx-font-smoothing: grayscale;
    24.  
      text-align: center;
    25.  
      color: #2c3e50;
    26.  
      margin-top: 60px;
    27.  
      }
    28.  
      </style>

    三、router index.js是做什么的?

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

    1.  
      import Vue from 'vue'
    2.  
      import Router from 'vue-router'
    3.  
      import Recommed from 'components/recommend/recommend'
    4.  
      import Singer from 'components/singer/singer'
    5.  
      import Rank from 'components/rank/rank'
    6.  
      import Search from 'components/search/search'
    7.  
       
    8.  
      Vue.use(Router)
    9.  
       
    10.  
      export default new Router({
    11.  
      routes: [
    12.  
      {
    13.  
      path: '/',
    14.  
      component: Recommed
    15.  
      },
    16.  
      {
    17.  
      path: '/recommend',
    18.  
      component: Recommed
    19.  
      },
    20.  
      {
    21.  
      path: '/singer',
    22.  
      component: Singer
    23.  
      },
    24.  
      {
    25.  
      path: '/rank',
    26.  
      component: Rank
    27.  
      },
    28.  
      {
    29.  
      path: '/search',
    30.  
      component: Search
    31.  
      }
    32.  
       
    33.  
      ]
    34.  
      })

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

      1. index.html文件入口

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

      3. node_modules为依赖的模块

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

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

  • 相关阅读:
    前端CSS-font属性,超链接的美化,css精灵,background综合属性
    iOS App上架流程(2016详细版)
    iOS中使用正则
    iOS开发--JS调用原生OC篇
    iOS开发--OC调用JS篇
    CocoaPods 的简单快速安装方法
    iOS开发小技巧 -- tableView-section圆角边框解决方案
    Mac合并分区
    iOS开发小技巧
    iOS开发中遇到的错误整理
  • 原文地址:https://www.cnblogs.com/sea520/p/11752453.html
走看看 - 开发者的网上家园