移动端vue项目
2018-07-30 本文已影响0人
ioido
一、准备
1.gitee.com新建项目
2.终端打开到Desktop用git克隆项目
3.终端运行vue init webpack 'foo'初始化项目，foo为项目文件夹与git克隆文件夹名称相同
4.cd foo
5.npm run dev
二、项目初步配置
- App.vue删除冗余代码，删除后如下所示
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
</style>
- 根目录index.html添加viewport内容，添加后如下：
<!DOCTYPE html>
<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>travel</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
- 引入reset.css,border.css解决不同浏览器样式不一致问题和1像素边框问题
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import './assets/styles/reset.css'
import './assets/styles/border.css'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
- 终端打开到项目文件夹，运行npm install fastclick --save解决click延迟问题。并引入
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import fastClick from 'fastclick'
import './assets/styles/reset.css'
import './assets/styles/border.css'
Vue.config.productionTip = false
fastClick.attach(document.body)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
- npm install stylus --save
npm install stylus-loader --save - 设置别名
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'
.header
display: flex
line-height: .86rem
background: $bgColor
</style>
使用后：（style标签里面引用要加~符号，varibles.styl放置变量，便于统一样式和日后修改）
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.header
display: flex
line-height: .86rem
background: $bgColor
</style>
- git status git add . git commit -m 'project init'
三、项目开始
- gitee.com创建分支index-swiper
- 终端打开项目文件夹git pull拉取 git checkout index-swiper切换分支 git status查看状态
- github 搜索vue-awesome-swiper，使用这个插件做轮播
- 安装npm install vue-awesome-swiper@2.6.7 --save
- 样式穿透>>>，等比例缩放图片写法，加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>
- 提交代码
git status查看状态
git add .添加到本地仓库
git commit -m 'add swiper'提交到本地仓库
git push提交到远程仓库
git checkout master切换到主分支
git merge origin/index-swiper将功能分支混合到主分支
git push提交主分支到远程仓库
四、添加功能
- gitee.com创建index-icons分支
- 终端打开到项目文件夹git pull
- git checkout index-icons切换到要开发的功能分支
- npm run dev
五、注意点
- 请求接口转发：在config/index.js里面修改proxyTable
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://localhost:8080',
pathRewrite: {
'^/api': '/static/mock'
}
}
},
- 全局事件要取消
- vue router滚动事件定义初始位置，看官网
- 手机联调，根目录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"
},
- @touchstart.prevent="handleTouchStart"解决scroll页面，整个页面跟随滑动的情况
- 解决部分低版本浏览器白屏问题，引入import 'babel-polyfill'
- npm run build打包 访问路径可以在config/index.js build里面设置
assetsPublicPath: '/foo',
- flex布局中设置外层div的min-width = 0 解决内层p标签过宽问题。
六、mpvue踩坑
- 样式lang=sass和scss不同，sass类似stylus写法，据说不可以用stylus，测试时stylus总是安装报错
- 页面跳转，已经在tab里面的页面跳转要注意一下，有所不同，具体情况请看这里
- 访问本地服务器要在微信开发工具--工具栏--详情开启不校验
发布要在微信公众平台小程序填写法域名
文章一
文章二 - 下拉刷新要在main.js 里面enable
- 上拉加载是触底加载，需要数据到达底部。测试用的数据量小，没有到达底部，就没办法加载第二页数据。
- mpvue 关闭eslink注意要重启npm
