Vue-cli3.0开发笔记

安装

npm install -g @vue/cli

# OR

yarn global add @vue/cli

版本为3.X

vue --version

创建项目

vue create hello-world

多页面应用VS单页面应用

　　多页面应用返回HTML

　　　　优点首屏加载快 SEO好

　　　　缺点页面切换慢

　　单页面应用　　返回JS

　　　　优点页面切换快

　　　　缺点首屏加载慢，SEO差 --解决办法服务器端渲染

项目代码初始化

　　移动端配置viewport

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

　　reset.css

　　引入border.css解决移动端边框1px问题

　　300MS延迟问题

　　　　安装fastclick fastClick.attach(document.body)

　　iconfont 管理

　　　　https://www.iconfont.cn

　　stylus

　　rem　　

　　　　设置html font-size 50px

　　　　1px = html font-size = 50px

　　　　设置html font-size 50px简化计算

　　css中使用变量

　　　　@import '~@/assets/styles/varibles.styl'

使用github 的分支开发项目

　　首先项目创建一个分支

　　然后本地使用git pull 把线上分支拉倒本地

　　git checkout XX 切换到分支

　　git status 查看是否在XX分支开发项目

　　项目开发完后

　　git add .

　　git commit -m ''

　　git push

　　这时候切换到主分支

　　git checkout master

　　git merge origin/xx 合并分支

　　git push

Mock数据

　　后台使用koa2或者express

　　yarn add koa koa-router koa-cors

　　使用axios请求后台数据

　　在vue.config.js中配置devServer

使用vue-awesome-swiper实现轮播

　　使用2.6.7的版本

实现移动端图片的宽高比自适应

    overflow: hidden

    width: %

    height:

    padding-bottom: %

使用vuex

　　创建index store mutations actions

使用keep-alive缓存组件

　　会将数据保存在缓存中

　　生命周期函数 activated deactivated　　

　　　　每次进入页面时会调用activated钩子函数，可以判断数据是否发生变化

flex布局BUG

　　flex:1,多余字体超出跨度，不能显示ellipsis，设置flex:1;min-width:0

异步组件

　　component: () => import( './views/About.vue')

真机测试bug

touchstart.prevent防止滑动页面也跟上下拖到

document.documentElement.scrollTop 为0

　　兼容方案document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset

轮播

　　vue-awesome-swiper

　　修改第三方样式使用深度作用选择器

　　　　>>> 或 /deep/

　　会解析成

　　.v-swiper[data-v-bdfa11ea] .swiper-pagination-bullet

秒客网

Vue-cli3.0开发笔记

相关文章