标签：VueJs

上一篇分享的是使用angularjs及materialdesign的管理后台前端页面的实现。因为感觉input的输入框实在是太丑了，并且用户端的页面我早已开发完毕，就等着后端给接口了，所以就萌生出了使用心中一直念念不忘的Vuejs来实现一版管理后台。

这个使用了Vue-cli来构建vue架构，使用vue-router来搭建路由，使用iview来作为UI框架。

项目构建

1. 安装nodejs
   nodejs安装及常用快捷键
   建议安装nvm来控制nodejs的版本，上面的链接里有详细的步骤，包括启动node服务常用的PM2等等…

2. 全局安装webpack、vue-cli脚手架
   npm install -g webpack vue-cli;

3. 创建工程
   vue init webpack-simple <project name>
   这里直接一路回车就可以了。
   注意：工程名不能是中文

4. 安装项目依赖
   进入工程，输入npm install就可以了。

5. 安装路由模块vue-router、网络请求模块vue-resource模块
   npm install --save vue-router vue-resource
   这个会安装到package.json的dependencies中。

6. 安装UI框架 iView
   npm install --save iview

7. 使用iView、vue-router、vue-resource

# main.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import VueResource from 'vue-resource';
import iview from 'iview';
import 'iview/dist/styles/iview.css';
import App from './App.vue';

Vue.config.debug = true;
Vue.use(VueRouter);
Vue.use(VueResource);
Vue.use(iview);

1. 修改webpack.config.js配置文件
   因为使用iView需要引用其css，但是最初的webpack.config.js文件里面并没有配置读取css文件和字体文件或者有的设定的有问题，所以这里需要我们自行修改一下：

{
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/
 },
 {
    test: /\.css$/,
    loader: "style-loader!css-loader"
 },
 {
    test: /\.(eot|woff|woff2|ttf)([\\?]?.*)$/,
    loader: "file-loader"
 },
 {
    test: /\.(png|jpg|gif|svg)$/,
    loader: 'file-loader',
    options: {
      name: '[name].[ext]?[hash]'
    }
 }

继续阅读基于Vuejs、vue-router、iview的管理后台

之前在学习新框架的时候，只是简单的跟着教程一步一步的敲demo，从来没有想过这个框架是如何实现的，简单的功能我能不能实现。最近打算开始学习Vue，觉得还是尝试一下能不能自己简单的实现其中的某些功能吧。

感觉模板引擎后端同学用的多一些，像jade、FreeMarker等，这个通常是在客户端发出HTTP请求之后，应用层的控制器(Controller)接收，通过应用层的服务器(service)访问数据库，然后封装到模型层(Model)，再跳转到视图层(View)，通过模板引擎生成HTML代码，最后返回给客户端浏览器。

但是Vuejs也是有模板的，他的模板引擎是在客户端浏览器的内存中处理生成的。所以我们用模板的时候，显示出来的是要渲染的数据。

Vue官网的第一个demo

<div id="app">
    {{ message }}
</div>

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
});

看到这个部分，感觉应该可以通过正则来简单的实现一下：
html部分不变。

正则部分：

首先想到的是匹配两边的大括号，/\{\{\}\}/，注意转译;
然后我们需要匹配大括号中间的内容，[\w]+;
这里需要注意一个问题，在匹配的内容前后可能会有空格，所以这里内容部分我们需要修改成\s*[\w]+\s*;
但是如果需要替换的话，使用正则的分组用法$1会比较轻松的解决这个问题;
所以正则的最终版就变成了/(\{\{\s*([\w]+)\s*\}\})/g;

js部分：

function vue(options) {
    var context = document.querySelector(options.el);
    var html = context.innerHTML;
    var regex = /(\{\{\s*([\w]+)\s*\}\})/g;
    while(regex.test(html)) {
        html = html.replace(RegExp.$1, options.data[RegExp.$2]);
    }
    context.innerHTML = html;
}

$1是最先匹配到的{% raw %}{{}}{% endraw %}
包括其内的部分，$2是匹配的要替换的对象。
使用方法跟vue的使用方法一样。
这样第一个demo我们就简单的实现了。当然相比vue有非常多的缺陷，比如不可以通过app.message来修改数据…

继续阅读vue匹配模板简单实现