vue2.0:项目开始，首页入门（main.js，App.vue，import from）

小鱼儿 2023-06-29 10:59 13阅读 0赞

![format_png][]

什么是main.js，他主要干什么用的？App.vue又是干什么用的？main.js里面的import from又在干嘛？new Vue(\{\})

是干嘛的？里面又需要什么参数，它到底能干什么？

一、什么是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是干嘛的呢？

import Vue from 'vue';

其实最完成的写法是：

![format_png 1][]

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

意思是：因为main.js是在src文件中，所以../向前一级相对目录查找node\_modules，再依次寻找后面的文件。还可以有：

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';

二、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把准备好路由组件注册到路由里：

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的基本配置、开发环境配置、生产环境配置等

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTA1NTc2Ni8yMDE4MDMvMTA1NTc2Ni0yMDE4MDMyMjE2NDQyNjI3MS0xNjA3Njc3NTM1LnBuZw?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTA1NTc2Ni8yMDE4MDMvMTA1NTc2Ni0yMDE4MDMyMjE3MTUyNjMwMC01MDIwNTQ4Ni5wbmc?x-oss-process=image/format,png