移动端vue项目开发

Mr159
1,253 阅读3分钟

一·准备

1.gitee.com新建项目
2.终端打开到Desktop用git克隆项目
3.终端运行vue init webpack 'foo'初始化项目，foo为项目文件夹与git克隆文件夹名称相同
4.cd foo
5.npm run dev

二·项目初步配置

1.根目录index.html添加viewport内容，添加后如下：
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,
        minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
        <title>document</title>
      </head>
    </html>
2.main.js中引入reset.css,border.css解决不同浏览器样式不一致问题和1像素边框问题
    
    import './assets/styles/reset.css'
    import './assets/styles/border.css'
    
3.运行npm install fastclick --save解决click延迟问题。并引入main.js中

    fastClick.attach(document.body)
4.npm install stylus --save
    npm install stylus-loader --save
5.设置别名bulid/webpack.base.conf.js里面resolve设置，之后要重启npm服务器:
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
          'vue$': 'vue/dist/vue.esm.js',
          '@': resolve('src'),
          'styles': resolve('src/assets/styles')
        }
    },
    之后就直接把
        <style lang="stylus" scoped>
            @import '../../../assets/styles/varibles.styl'
       </style> 
    改写成：<style lang="stylus" scoped>
                @import '~styles/varibles.styl'
            </style>
6.把项目放暂存区
    git status 
    git add . 
    git commit -m 'project init'

三·项目开始

1.gitee.com创建分支index-swiper
2.终端打开项目文件夹git pull拉取 git checkout index-swiper切换分支 git        status查看状态
3.github 搜索vue-awesome-swiper，使用这个插件做轮播
4.安装npm install vue-awesome-swiper@2.6.7 --save
5.样式穿透>>>，等比例缩放图片写法，加wrapper防抖动，script引入放header标签    也是防抖动
    <style lang="stylus" scoped>
      .wrapper >>> .swiper-pagination-bullet-active
        background: #fff
      .wrapper
        overflow: hidden
        width: 100%
        height: 0
        padding-bottom: 26.7%
        background: #eee
        .swiper-img
          width: 100%
    </style>
6.提交代码
    git status查看状态
    git add .添加到本地仓库
    git commit -m 'add swiper'提交到本地仓库
    git push提交到远程仓库
    git checkout master切换到主分支
    git merge origin/index-swiper将功能分支混合到主分支
    git push提交主分支到远程仓库

四·添加功能

1.gitee.com创建index-icons分支
2.终端打开到项目文件夹git pull
3.git checkout index-icons切换到要开发的功能分支
4.npm run dev

五·注意点

1.请求接口转发：在config/index.js里面修改proxyTable
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://localhost:8080',
        pathRewrite: {
          '^/api': '/static/mock'
        }
      }
    },
2.全局事件要取消
3.vue router滚动事件定义初始位置，看官网
4.手机联调，根目录package.json添加 --host 0.0.0.0：
    "scripts": {
        "dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",
        "start": "npm run dev",
        "lint": "eslint --ext .js,.vue src",
        "build": "node build/build.js"
      },
5.@touchstart.prevent="handleTouchStart"解决scroll页面，整个页面跟随滑动的    情况
6.解决部分低版本浏览器白屏问题，引入import 'babel-polyfill'
7.npm run build打包 访问路径可以在config/index.js build里面设置
    assetsPublicPath: '/foo',
8.flex布局中设置外层div的min-width = 0 解决内层p标签过宽问题。

六·mpvue踩坑

1.样式lang=sass和scss不同，sass类似stylus写法，据说不可以用stylus，测试时s    tylus总是安装报错
2.页面跳转，已经在tab里面的页面跳转要注意一下，有所不同，具体情况请看这里
3.访问本地服务器要在微信开发工具--工具栏--详情开启不校验
发布要在微信公众平台小程序填写法域名
文章一  网址：https://blog.csdn.net/qq_26245325/article/details/79675881
文章二  网址：https://blog.csdn.net/qq_39390710/article/details/80851077
4.下拉刷新要在main.js 里面enable
5.上拉加载是触底加载，需要数据到达底部。测试用的数据量小，没有到达底部，就没办法加载第二页数据。
6.mpvue 关闭eslink注意要重启npm
avatar
文章
阅读
粉丝