跟着项目学Vue.js(五) 代码结构分析

接上文，src文件夹是项目核心文件夹，所有的代码都放在这个文件夹下面。

代码结构如下：

hello-world
|
|-- public
|-- |-- favicon.ico                  //网站图标
|-- |-- index.html                   //入口页面
|-- src   
    |-- assets                       // 静态文件，比如一些图片，json数据等
|   |-- components                   // vue公共组件
    |-- views                        // 以页面为单位的vue文件、html文件等
|   |-- App.vue                      // 页面入口文件
|   |-- main.js                      // 程序入口文件，加载各种公共组件
|   |-- router.js                    // vue的路由管理
|   |-- store.js                     // vuex

1)App.vue

App.vue类似于一般网站的母板页，App.vue中包含导航(<router-link> )和子视图(<router-view>)，通过点击导航切换子视图的主体内容，子视图一般会放在views文件夹下。代码如下：

<template>
  <div id="app">
    <div id="nav">
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/">Home</router-link> |
        <router-link to="/about">About</router-link>
    </div>

    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view/>
  </div>
</template>

<style lang="less">
   。。。
</style>

 

<router-link> 组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签.。

<router-view> 组件是一个 functional 组件，渲染路径匹配到的视图组件。

 

2)main.js——程序入口

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app');

因为我们前面的章节并不会涉及到状态管理，因此暂时注释掉对store的调用：

import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

new Vue({
  router,    //(缩写) 相当于 router: router
  render: h => h(App),
}).$mount('#app');

实例化Vue，传入两个属性 router和render。这里因为我们通过import引入的router和属性名重名了，造成预期的属性需要缩写。如果写成router: router，eslint会提示这一行代码有坏味道，因为您本可以使用缩写的，如下：

Module Warning (from ./node_modules/eslint-loader/index.js):
error: Expected property shorthand (object-shorthand) at src\main.js:9:3:
   7 |
   8 | new Vue({
>  9 |   router: router,
     |   ^
  10 |   render: h => h(App),
  11 | }).$mount('#app');

 

这里我们索性再搞一个重名，实例化的时候，把两个属性都用缩写，最终的代码如下：

import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

const render = h => h(App);

new Vue({
  router,
  render,
}).$mount('#app');

脚手架在router.js文件中定义路由

import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';

Vue.use(Router);

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
    },
  ],
});

并在main.js通过import引入， 

import router from './router'

 

这里，为了便于讲解，我们把这行代码去掉，将rouer.js中的实现拿过来，直接放到main.js里，将这两个文件合二为一：

import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import App from './App.vue';

Vue.config.productionTip = false;

Vue.use(Router);

// 1. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
const routes= [
  {
    path: '/',
    name: 'home',
    component: Home,
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('./views/About.vue'),
  },
];

// 2. 创建 router 实例，传入上面定义的 `routes` 配置
const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: routes,
});

// 3.通过render渲染主组件App
const render = h => h(App);

// 4. 创建和挂载根实例。
// 通过 router 配置参数注入路由，从而让整个应用都有路由功能
new Vue({
  router,
  render,
}).$mount('#app');

现在就可以很容易的弄清整个实例化过程了。

 

通过代码，我们可以了解到main.js大致的功能：

main.js通过import将一个Vue.js的组件文件引入，并创建一个Vue实例，在构造函数中，通过 router 配置参数注入路由，从而让整个应用都有路由功能，用render配置参数来绘制App主组件，并将实例化后的Vue挂载到index.html中的 <div id="app"></div>这个dom元素。

           现在应用就可以启动了。