Vue开发单页面网站学习要点

接上一篇，开发环境建好了，就好好写代码吧。后端的django没什么特别的，定义业务类，一个一个写业务接口就可以了。倒是Vue这个东西，有不少弯路要走。因此零零散散学习到的一些要点放在这儿，记录一下：

1、项目核心结构：一个空白的index.html文件，body中只有一个id=”app”的div定义，运行起来这个div会被App.vue文件中的template定义替换掉。因此，页面的实际结构是在App.vue中实现的。假设你的网站是标准的bootstrap架构，那么它的content/header/footer/sidebar等等都是在App.vue中定义的。（或者分别抽象成一个独立的components组件再在App.vue中引用起来，实际逻辑是一样的。）然后，App.vue中有一个router-view的定义，每个子页面的路由，会将该子页面的代码替换进来，比如首页，列表页，明细页，编辑页这样。

2、每个子页面是一个.vue文件，其中有三部分，template定义html内容，script定义页面的数据逻辑，style定义页面的元素样式。微信小程序也是这样的结构，只是把这三块分别放到了三个不同的文件里。

3、router/index.js负责了整个项目的页面逻辑定义，将一个一个的.vue文件跟URL映射对应起来，点击到哪个URL的时候，就调用哪个.vue文件来执行并将页面渲染到上级的中。在routes中的每一个route里定义children子路由，它就可以做成多层route嵌套。

4、router实现默认是hash格式，也就是整个站点的URL实际都是根/，其它子页面都是在它后面加#/home/这样来实现的，页面的变化变的是#后面的部分。但是它也支持history模式，在router/index.js里面routes定义前面加一行 mode: ‘history’, 就可以了，URL就会变成正常的样式，但是对nginx的配置要求就会高一些。要在nginx里使用这样的转发配置：

location / {
  try_files $uri $uri/ /index.html;
}

5、添加全局jquery对象：在build/webpack.base.conf.js文件头部添加一行

const webpack = require('webpack')

然后在文件最后node:段的定义前面加上一段plugins定义：

plugins:[
    new webpack.ProvidePlugin({
        jQuery: "jquery", $:"jquery"
    })
],

这样就可以在任意vue文件里的script里面直接使用$来使用jquery的代码了。

6、如果在vue文件里使用jquery来处理ajax事件，要小心this的使用。比如在Home.vue里，页面加载完成后调用一个ajax请求，将返回结果更新到某个字段定义里，那么在$.get的回调里面直接使用this.json就不行，需要在$.get之前将this对象保存下来使用。

export default {
  name: 'Home',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      json:{}
    }
  },
  mounted(){
    var vm = this;
    $.get('/api/', function(json){
      vm.json = json;
    });
  }
}

7、全局调用更新页面Title。Vue的定义是body里面的div，页面的标题Title属性是在这个范围之外的，没有办法通过Vue的变量去改变它。所以一般只能使用document.title方法直接修改。但是这样修改在微信里会不起作用，微信取不到修改后的标题。因此要使用一个特殊的hack技巧让微信里生效。定义一个utils.js文件：

let setPageTitle = function (t) {
    document.title = t;
    let iframe = document.createElement('iframe');
    iframe.style.visibility = 'hidden';
    iframe.style.width = '1px';
    iframe.style.height = '1px';
    iframe.src = '//m.baidu.com/favicon.ico';
    iframe.onload = function () {
        setTimeout(function () {
            iframe.remove();
        }, 10);
    };
    document.body.appendChild(iframe);
};

module.exports = {
    setPageTitle
};

然后在其它需要修改页面标题的地方引用它，比如在上面的Home.vue里面，在export之前加上（假设utils.js放在router目录下）

import { setPageTitle } from '../router/utils';

然后在mounted方法里面加上一行：

setPageTitle('Home page.');

这样每次回到首页的时候页面标题就会被设置为Home page.

8、在子页面中修改App.vue里定义的变量。通常在App.vue里定义的Sidebar或者Header,Footer之类的，里面都会有一些动态变量的字段，将字段定义在App.vue里，在下级页面里想要修改这个变量值的时候，只需要使用

this.$parent.headerTitle = 'Home Header title.';

9、打包方式：默认的配置下npm run build调用webpack打包会把所有的页面内容打包成一个app.js文件和一个app.css文件，HTML内容也包含在js文件里，index.html文件直接引用了这个js文件。这样导致的问题是如果项目比较大，几十甚至几百个页面，打包出来的js文件特别大，比如十几M，那index.html首次加载的时候就慢的没法用了。因此，这时候要使用lazy load的方式，拆分打包后的文件，并且让它按需加载。

首先将Router路由定义里面各个js的引用方式改一下，将

import Home from '@/pages/Home'

这种引用方式改成

const Home = () => import('./Home.vue')

也就是将这个变量变成一个Promise的方法声明，然后下面的Route定义不用动，还是{ path: ”, component: Home }。
然后在frontend/build/webpack.base.conf.js里面的output定义里增加一个配置：

chunkFilename: '[name].js',

同时在下面的modules/rules里面的test: /\.js$/段增加一个配置：

options: {
          plugins: [require('babel-plugin-syntax-dynamic-import')]
        }

这样打包的时候webpack才知道怎么命名每一个块文件（保持其原有文件名）。

但是这样又会导致打包后每一个页面都是一个独立的js文件，而通常我们更希望将一组相关的模块打包成一个js文件一起加载，webpack还提供了一个特殊的注释语法来实现:

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

这样三个文件就会打包一同一个js文件里去一起加载完成。

10、这里有个开源的Vue模板项目，以单页面的方式实现了全套的饿了么手机端网站，可以作为最佳实践或者类似项目的基础结构来使用。
https://github.com/bailicangdu/vue2-elm