Vue开发日常累积篇

1.Vue开发时目录结构

2.开发时相关知识

(1).开发时前端标签初始化

• html一些标签(比如: input)在不同的浏览器里显示的略有差异，这时我们可能需要对它来进行统一，这时我们可以新建一个css文件，进行统一性的定义, 这个css文件推荐使用一个叫normalize.css
• GitHub链接: normalize.css.

(2).路径别名的配置(Vue-Cli)

• Vue-Cli2中可以在webpack.base.conf.js配置别名

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src'),
      'assets': resolve('src/assets'),
      'components': resolve('src/components'),
      'views': resolve('src/views')
    }
  },
  

• Vue-Cli3本着零配置原则，需要我们自定义一个名叫vue.config.js的文件

   module.exports = {
     configureWebpack: {
       resolve: {
         alias: {
           'assets': '@/assets',
           'common': '@/common',
           'components': '@/components',
           'network': '@/network',
           'views': '@/views'
         }
       }
     }
   }
  

• 通过Vue-Cli3自带的配置文件可以看出, src已经被配置成@了, 因此在我们自定义的vue.config.js中可以直接用@

  ...
    .alias
      .set('@', api.resolve('src'))
      .set(
        'vue$',
        options.runtimeCompiler
          ? 'vue/dist/vue.esm.js'
          : 'vue/dist/vue.runtime.esm.js'
      ) 
  ...
  

• router和store不需要配置是因为只是在main.js中引用，而且调用的时候直接用this.$router或者this.$store就可以了

(3).关于.editorconfig

• 虽然在cli3中去掉了，但是为了便于项目代码的风格统一，添加.editorconfig文件是有必要的

    # https://editorconfig.org
    root = true
    
    [*]
    charset = utf-8
    indent_style = space
    indent_size = 2
    end_of_line = lf
    insert_final_newline = true
    trim_trailing_whitespace = true
  

(4).经验相关

• 在Android，iOS等移动端开发中，UI设计中底部的tabBar高度一般是49px，这个49px一般是最适合的

    #tab-bar {
      display: flex;
    }
    .tab-bar-item {
      flex: 1;
      text-align: center;
      height: 49px;
    }
  

• 图片最下方会多3个像素(3像素Bug), 一般都通vertical-align: middle来解决

      <img src="home.svg">
      <div slot="item-text">首页</div>
      
      .tab-bar-item img {
        /*图片和阴影间留点空隙*/
        margin-top: 3px;
        /*著名的3像素Bug*/
        vertical-align: middle;
      }
  

  
• 画面滚动
  • 1.浏览器原生滚动(sticky属性)
    • 优点: 通过css属性来控制，实现容易, 适用于移动端开发
    • 缺点: 不支持ie等浏览器

     .tab-control {
       position: sticky;
       top: 44px;/*距离顶端达到44后,position属性会改为fixed*/
     }
    

  • 2.开源插件better-scroll