Vue项目开发准备

No.1 准备初始化css

可以通过引入css初始化文件保证H5标签在大多数浏览器中有着同样的显示效果。
我是在App.vue中引入的css初始化文件

<!-- 放置<router-view/>用于多页面应用 -->
<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style lang="less">
// 引入初始css化文件，方便后续进行浏览器适配
@import "./assets/css/init.css";
</style>

这里给出淘宝的初始化css文件以供参考。

/* 淘宝的初始化代码 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

设置全屏背景图片

运用css解决拉伸问题

/* 设置全屏背景图片 */
.bg {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url('../assets/img/bg.png');
    background-size: 100% 100%;
}

引入ant-design

cnpm add ant-design-vue
在main.js中添加引入配置（这里展示全部引入）官方文档

// 引入ant-design
import "ant-design-vue/dist/antd.css"
import Antd from 'ant-design-vue'
// 使用ant-design
Vue.use(Antd)