zoukankan      html  css  js  c++  java
  • 移动端项目构造(结合项目实际情况)

    1.重置浏览器默认样式;导入基础公共样式;
    App.vue 
    <style lang="sass">
     @import "../scss/base.scss";
     sass语法需要安装:node-sass、sass、sass-loader依赖;
    </style>
    或者
    <style lang="less">
     @import "../less/base.less";
     less语法需要安装less、less-loader依赖;
    </style>
    或者
    <style>
     @import "../css/base.css";
     css语法一般默认有依赖没有则需要下载style-loader、css-loader;
    </style>
    引入字体图标, 在App.vue的style标签里面;(一般为阿里图库项目图标)
    @import url('//at.alicdn.com/t/font_nfzwlroyg2vuz0k9.css')
    ------------------------------------------------------------
    2.rem 适配
    推荐用淘宝js做主流设备的兼容性;
    flexible.js
    ------------------------------------------------------------
    3.调试(安装eruda命令:cnpm i eruda -S)和模拟数据(安装mock.js命令cnpm i mockjs -S)
    // 只有在本地开发环境才加载vconsole 便于调试
    if (process.env.NODE_ENV !== 'production') {
      require('eruda').init()
    }
    // 引入mock模拟本地开发数据
    if (process.env.NODE_ENV == 'mock') {
      require('../mock/')
    }
    ------------------------------------------------------------
    4.安装 babel-polyfill(命令cnpm i babel-polyfill -S)ES6
    用于解决浏览器不支持原生功能的代码
    ------------------------------------------------------------
    5.安装 axios 或者 其他ajax封装库如fetch(新一代api)、vue-resource(停止维护)用于请求数据
    ------------------------------------------------------------
    6.安装vuex(视项目情况大小数据复杂程度决定)
    ------------------------------------------------------------
    7.安装fastclick解决移动端点击300ms延迟(main.js)
    import FastClick from 'fastclick'
    FastClick.attach(document.body);
    ------------------------------------------------------------
    8.修改main.js渲染方式(可要可不要建议这种)
    new Vue({
     el: '#app',
     router,
     render: h => h(App)
    })
    ------------------------------------------------------------
    9.路由懒加载(一下两种方式都行第一种为webpack自带)
    让路由按需加载,当需要用到的时候,才去加载对应的组件,利用webpakc的异步加载可以解决;
    const Car = r => require.ensure([], () => r(require('@/components/car')), 'car') //webpack自带
    const Car = resolve => require(['@/components/car'], resolve) //commonJS写法
    component: () => import('./components/Item.vue') //Es6写法
    ------------------------------------------------------------
    10.异步组件(高级)看项目需求一般建议
    components: {
       searchSearch: function (resolve) {
        //异步组件写法
         require(['./xxx.vue'], resolve)
       }
    }
    ------------------------------------------------------------
    11.git/svn提交代码具体操作自己拿一个仓库去试;

     

  • 相关阅读:
    ORA-1034 ORACLE not available (转)
    关于命名管道
    Linux12.3 exportfs命令
    Linux12.2 NFS配置
    Linux12.1 NFS介绍
    Linux11.4 常用SQL语句、数据库备份恢复
    Linux11.3 MySQL用户管理
    ssh远程连接错误
    Internal Server Error: /api/course/coursesection/
    vue.esm.js?efeb:591 [Vue warn]: Invalid prop: type check failed for prop "data". Expected Array, got String.
  • 原文地址:https://www.cnblogs.com/lhl66/p/8979111.html
Copyright © 2011-2022 走看看