首先下载vue2的模板:vue-webpack-boilerplate

快速起步

cnpm install -g vue-cli
vue init webpack my-project
cd my-project
cnpm install 
npm run dev

到这里,我们就已经拿到了一个完整的vue项目文件了,包含了构建工具webpack,还有测试的框架,在此基础上,做相关的开发。

由于要用到scss去编译css文件,所以我们需要安装依赖包

cnpm install node-sass sass-loader

需要在build/webpack.base.conf.js找到module.rules对象,添加额外的配置,如下:

{
    test: /\.scss$/,
    include: [resolve('src'), resolve('test')],
    exclude: [/node_modules\/(?!(ng2-.+|ngx-.+))/],
    use: ExtractTextPlugin.extract({
        use: ['css-loader', 'sass-loader'],
        fallback: 'style-loader'
    })
}

创建一个 Vue 的根实例

// index.html
<div id="app">
  <router-view></router-view>
</div>
// main.js
import Vue from 'vue'
import router from './router'
new Vue({
  el: '#app',
  router
})

全局注册过滤器

import filters from './filters';
Object.keys(filters).forEach(k => Vue.filter(k, filters[k]));

全局注册路由器

// router.js
import Vue from 'vue'
import Router from 'vue-router'
import Index from '../views/index';
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Index',
      component: Index
    }
  ]
})

保留上一页的状态

运用sessionStorage临时存储数据,结合route的进出回调方法传递的参数做出判断,并及时地维护sessionStorage里的存放的数据和滚动的距离。

mounted() {
    // 如果sessionStorage有存储数据,则直接渲染之前的数据
    if (window.sessionStorage.topics) {
        this.topics = JSON.parse(window.sessionStorage.topics);
        this.$nextTick(() => $(window).scrollTop(window.sessionStorage.scrollTop));
    } else {
        // load data
    }
},
beforeRouteLeave(to, from, next) {
    // 保留上一页的状态
    if (to.name === 'topic') {
        // 当前页的数据
        window.sessionStorage.topics = JSON.stringify(this.topics);
        // 当前滚动条位置
        window.sessionStorage.scrollTop = $(window).scrollTop();
    }
    next();
},
beforeRouteEnter(to, from, next) {
    if (from.name !== 'topic') {
        // 如果不是返回目标页面,就移除之前记录的数据集
        window.sessionStorage.removeItem('topics');
        window.sessionStorage.removeItem('scrollTop');
    }
    next();
}

// 无限加载

The animation-fill-mode property defines what values are applied by the animation outside the time it is executing.

动画有是三个状态,动画等待(animation-delay)、动画进行、动画结束。为了能够定义动画等待、动画结束时该呈现什么样式,包括默认样式、初始样式0%|from、结束样式100%|to。所以引入了animation-fill-mode:none | forwards | backwards | both

采用遍历表单输入框的方式由上向下逐个校验,而不是先得到每个文本框的jQuery对象,再去单个进行检验,这样多了命名,以及后续维护的难度。

var title = {
  name: "姓名",
  mobile: "联系电话",
  email: "联系邮箱",
  code: "验证码"
};
$(".submit").on("click", function() {
  if (verifyForm()) {
    // ...
    $(this).attr({ "disabled": "disabled" });
  }
});
// 表单验证
function verifyForm() {
  var result = 1;
  // 遍历文本输入框校验输入是否为空、格式是否正确
  $("input").each(function(index, ele) {
    var val = ele.value.trim(),
      name = ele.name;
    if (!val) {
      alert(title[name] + "不能为空");
      result = 0;
    } else {
      if (ele.name == "mobile") {
        if (!(/^1[34578]\d{9}$/.test(val)) || !/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/.test(val)) {
          alert("联系电话有误,请重填");
          result = 0;
        }
      }
      if (ele.name == "email") {
        if (!(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(val))) {
          alert("邮箱格式有误,请重填");
          result = 0;
        }
      }
    }
  })
  return result;
};