vue学习总结二（项目前期准备工作）

当我们构建完项目之后不要急于开始写代码，一些准备工作还是必须要先完成的，比如：

因为我们是做的移动端单页面的项目，会存在300ms的点击延迟问题，改怎么解决？
由于各游览器厂商对不同html标签的样式具有不同的初始化定义，因此我们要做到游览器兼容性的话就必须要统一初始化一个样式文件。
我们写vue项目用什么来写样式？css?直接写css的话感觉太麻烦了，因此我一般习惯用stylus来写vue项目，当然用户可以根据自己的喜好采用不同的预编译语言如：less,sass等
网页中经常会用到各种各样的小图标，在没有ui妹子给我们作图的前提下改怎么办？iconfont帮我们解决了这个问题

1.要解决300m延迟问题只需要安装并导入一个插件fastclick即可，

在main.js中引入并使用如下：

2.关于样式初始化的问题，在网上随便找找都有一大堆，我怕把个人用的贴出来供大家参考一下：这个reset.css文件位置为：src目录下面的asset-->style-->reset.css

*{
  touch-action: none;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}


/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
  background-color: #f5f3f3;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

然后在main.js中引入即可：

找到build文件夹下面的webpack.base.config.js文件，根据以下图示可以自行配置其他路径

3.在vue项目中要使用stylus语法的发必须要安装几个插件：stylus和stylus-loader，

接下来我们为了验证stylus是否成功可以在项目中测试一下，我们把初始化构建的项目中的helloworld组件中的内容给删除掉，写一些自己的html来测试

删除之前：

删除之后：

<template>
  <div class="hello">
    <div class="test-name">测试名字</div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  .hello
    font-size 24px
    color red
    .test-name
      font-size 22px
      color deepskyblue
    h1
      font-size 34px
      font-weight bold
</style>

注意stylue语法元素层次之间是要有缩进的，属性与属性值之间不需要写“:”结尾也不需要写';',是不是感觉特别简洁有没有，style标签上面需要添加属性lang=stylus来告诉浏览器，我是要用stylus来写样式，scoped表示作用域的问题

接下来看下页面效果，看看我们写的stylus有没有实际效果：

4.移动端项目因为要兼容各种不同设备和分辨率，所以像素单位不能写死否则会出现不兼容的情况，个人采用的是用rem来做单位，具体写法如下：在index.html文件中用封装了一个函数来把px转换成rem

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>yourprojectname</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
  <script>
    window.onload = function(){
      /*750代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写10是
       为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/
      getRem(750,100);
    };
    window.onresize = function(){
      getRem(750,100);
    };
    function getRem(pwidth,prem){
      var html = document.getElementsByTagName("html")[0];
      var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
      html.style.fontSize = oWidth/pwidth*prem + "px";
    }
  </script>
</html>

具体用法我还是修改刚刚那个helloworld组件来展示它的用法：其中宽度，高度，行高，字体大小等都转换为rem单位

<template>
  <div class="hello">
   <div class="left">左边</div>
   <div class="right">右边</div>
  </div>
</template>

<script>
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  .hello
    font-size 0.48rem
    width 7.5rem
    .left,.right
      width 3.75rem
      height 1rem
      line-height 1rem
      text-align center
      color white
      float left
    .left
      background-color deepskyblue
    .right
      background-color red
</style>

接下来看效果图：

vue学习总结二（项目前期准备工作）

猜你喜欢