index.js

index.js 内容非常简单, 毕竟这只是一个简单的模板

import Vue from 'vue';
import router from './index.router.js';

import './index.less';

export default new Vue({
  el: '#root',
  router,
  render: h => h('router-view')
});

首先引入 Vue 是必要的, 这是核心包.

其次是引入 router, 这是我们引入的 vue插件 vue-router. 可以在根目录 package.json 中看到和配置版本. 它主要的功能就是配置路由, 哪些 url 能指向和访问哪些页面.后面会再聊到 router.

再来是引入 index.less 样式文件, 一些 common 的样式可以放在这里.

最后就是如何开始用 Vue 的代码了, 初始化一个 Vue 实例之后, 定义了element 的 id 为 root, 放入 router, 最后定义了渲染.

index.html

这是入口页面, 所有的页面变换和渲染都在这里面进行. 每一次 route 的改变都只是改变了element id 为 root( index.js 中定义的 )的div内容

<div id="root"></div>

这其实就是一个 html 的大容器的感觉, 所有的活动都在容器中进行, 当然写在index.html中的所有内容都是 common 的.

index.router.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import Main from './app/main/Main.vue';

Vue.use(VueRouter);

export default new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      components: {
        default: Main
      }
    },
    {
      path: '*',
      redirect: '/'
    }
  ]
});

首先引入Vue 核心包和 vue-router 插件, 因为我们需要让 Vue 知道, 我们使用了 vue-router 这个插件, 即后面的第一行代码

Vue.use(VueRouter);

然后引入主模板, Main.vue, 这是因为后面我们要配置一个路由, 根目录 / 跳往这个模板.

可以看到我们配置了2个路由, 一个指向根路径, 一个是当出现未配置的其他路径的时候, 我们默认跳往根路径. 其实生成环境我们是应该跳往404模板的. 这里只是一个 demo 空项目, 就姑且全部跳往主页面吧!

index.spec.js

index.js 的单元测试文件, 所有以 *.spec.js 结尾的都是测试文件. 不再过多介绍.

Main.vue

<template>
  <div id="root">
    <header-component></header-component>
    <main>
      <title-component></title-component>
      <techs></techs>
    </main>
    <footer-component></footer-component>
  </div>
</template>

<script src="./main.js"></script>

我们可以看到这个主模板, 也全是各种自定义模板嵌套而来的, 这也是 vue 比较推荐的做法, 组件化, components, 做法和 react 很像.

在这里你可以添加必要的 js 文件, 也可以添加一些 css 文件.

查看 main.js, 看看是如何工作的:

import Header from '../header/Header.vue';
import Title from '../title/Title.vue';
import Techs from '../techs/Techs.vue';
import Footer from '../footer/Footer.vue';

export default {
  name: 'Main',
  components: {
    'header-component': Header,
    'title-component': Title,
    'techs': Techs,
    'footer-component': Footer
  }
};

引入需要用到的模板, 然后定义名称, 仅此而已. 非常简单. 后面的模板都按照类似的做法就可以了.

上一篇: VUE 项目结构和优化

下一篇:Vue html 渲染和数据绑定