vue移动端入门小项目

1.始化项目

vue init webpack my-app
cd my-app
npm run dev

2.配置rem适配方式 && 封装http请求方法

• 在src目录下新建tools文件夹，放置js脚本

// src/tools/rem.js
(function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

// src/tools/http.js
export default (type='GET', url='', data={}, async=true) => {
    return new Promise((resolve, reject) => { //定义一个promise
        type = type.toUpperCase();

        let requestObj;
        if (window.XMLHttpRequest) {
            requestObj = new XMLHttpRequest();
        } else {
            requestObj = new ActiveXObject;
        }

        if (type == 'GET') {
            let dataStr = ''; //数据拼接字符串
            Object.keys(data).forEach(key => {
                dataStr += key + '=' + data[key] + '&';
            })
            dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
            url = url + '?' + dataStr;
            requestObj.open(type, url, async);
            requestObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            requestObj.send();
        }else if (type == 'POST') {
            requestObj.open(type, url, async);
            requestObj.setRequestHeader("Content-type", "application/json");
            requestObj.send(JSON.stringify(data));
        }else {
            reject('error type');
        }

        requestObj.onreadystatechange = () => {
            if (requestObj.readyState == 4) {
                if (requestObj.status == 200) {
                    let obj = requestObj.response
                    if (typeof obj !== 'object') {
                        obj = JSON.parse(obj);
                    }
                    resolve(obj);
                }else {
                    reject(requestObj);
                }
            }
        }
    })
}

3.设计路由：

// src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'

// 一级路由
import App from '../App'

// 二级路由
import Home from '../pages/home'
import Item from '../pages/item'
import Result from '../pages/result'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
        path: '/',
        name: 'app',
        component: App,
        children: [
            {
                path: '',
                component: Home
            },
            {
                path: '/item',
                component: Item
            },
            {
                path: '/result',
                component: Result
            }
        ]
    }
  ]
})

4.全局reset

// src/common/style.less
body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, li, a, p, h1, h2, h3, h4,h5, i, b, textarea, button, input, select  {
    padding: 0;
    margin: 0;
    list-style: none;
    font-style: normal;
    text-decoration: none;
    border: none;
    color: #313131;
    box-sizing: border-box;
    font-weight: lighter;
    font-family: 'Microsoft YaHei';
    -webkit-tap-highlight-color:transparent;
    &:focus {
        outline: none;
    }
}


html{
    height: 100%;
    width: 100%;
}
body{
    height: 100%;
    width: 100%;
    background: url(../images/1-1.jpg) no-repeat;
    background-size: 100% 100%;
}

.clear:after{
    content: '';
    display: block;
    clear: both;
}

.clear{
    zoom:1;
}

.back_img{
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.margin{
    margin: 0 auto;
}

.left{
    float: left;
}

.right{
    float:right;
}

.hide{
    display: none;
}

.show{
    display: block;
}

4.书写页面代码：

• 从上面的路由设计可以看出，此项目有3个页面：home、item和result
• 下面分别书写这3个文件代码

// src/pages/home/index.vue