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
异步组件
真机测试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开发笔记的更多相关文章
- vue-calendar 基于 vue 2.0 开发的轻量,高性能日历组件
vue-calendar-component 基于 vue 2.0 开发的轻量,高性能日历组件 占用内存小,性能好,样式好看,可扩展性强 原生 js 开发,没引入第三方库 Why Github 上很多 ...
- vue cli3.0 结合echarts3.0和地图的使用方法
echarts 提供了直观,交互丰富,可高度个性化定制的数据可视化图表.而vue更合适操纵数据. 最近一直忙着搬家,就没有更新博客,今天抽出空来写一篇关于vue和echarts的博客.下面是结合地图的 ...
- 解决vue/cli3.0 语法验证规则 ESLint: Expected indentation of 2 spaces but found 4. (indent)
当你使用vue/cli3.0的时,有可能出现雁阵规则 ESLint: Expected indentation of 2 spaces but found 4. (indent) 解决方法 1.在vu ...
- 01-路由跳转 安装less this.$router.replace(path) 解决vue/cli3.0语法报错问题
2==解决vue2.0里面控制台包的一些语法错误. https://www.jianshu.com/p/5e0a1541418b 在build==>webpack.base.conf.j下注释掉 ...
- vue cli3.0打包
1.vue cli3.0需要在项目根目录下配置webpack 包括反向代理以及打包文件路径 const webpack = require("webpack"); module. ...
- vue 2.0 开发实践总结之疑难篇
续上一篇文章:vue2.0 开发实践总结之入门篇 ,如果没有看过的可以移步看一下. 本篇文章目录如下: 1. vue 组件的说明和使用 2. vuex在实际开发中的使用 3. 开发实践总结 1. ...
- 前端学习日记-vue cli3.0环境搭建
卸载老版本的 vue-cli : npm uninstall vue-cli -g 安装新版本的 : npm install -g @vue/cli --安装新版本cli 同时nodeJS 要更新至 ...
- 使用VUE CLI3.0搭建项目vue2+scss+element简易版
1.安装Vue CLI 3 //三选一即可cnpm install -g @vue/cli npm install -g @vue/cli yarn global add @vue/cli 注意: 1 ...
- Vue项目构建开发笔记(vue-lic3.0构建的)
1.router.js里面 { path: '/about', name: 'about', // route level code-splitting // this generates a sep ...
- vue cli3.0配制axios代理
今天学习时,想访问网易新闻接口,结果显而易见,因为跨域被浏览器拒绝了. 去网上找一下结果一开始找到的是2.x版本的配置,生硬的放进去,给我各种报错.编译阶段就炸了.浪费好多时间 再按3.0版本去搜索才 ...
随机推荐
- 学习笔记-AngularJs(八)
在使用form.FormController和ngModel.NgModelController之前,先来学习一下怎么一个ng-model-options指令,觉得怎么这个指令挺好用的,我们知道ng- ...
- Vue(八) 数字输入框组件案例
数字输入框是对普通输入框的扩展,用来快捷输入一个标准的数字,如图: 代码: <div id="app"> <input-number v-model=" ...
- mysql 在 win 安装 最全攻略(附转载的乱码终极解决方案)以及解决data too long for column 'name' at row 1, 一种可能就是因为编码一致性问题.
[博客园cnblogs笔者m-yb原创,转载请加链接,公众号aandb7, github.com/mayangbo666,QQ群927113708] https://www.cnblogs.com/m ...
- find -exec 批量使用方法
查找当前目录批量文件内容后复制到指定目录当中 find . -type f -name "*.log" -exec cp {} /目标目录/ \;
- 网络性能测试工具-Iperf
一.简单介绍 Iperf是一个网络性能测试工具,Iperf可以测试TCP和UDP带宽质量,Iperf可以测量最大TCP带宽,具有多种参数和UDP特性.Iperf可以报告带宽,延迟抖动和数据包丢失.利用 ...
- [Java] [Lock] [Synchronized VS ReentrantLock]
Overview java编写多线程程序时,为了保证线程安全,需要对数据进行同步,经常用到的两种同步方式就是synchronized和重入锁ReentrantLock. 相似点 都是加锁方式 都是阻塞 ...
- 一般xcode报错
下面这图报找不到FMDtabaseQueue,其实是把文件拖入xcode的时候xcode没有把.m文件添加进工程路径 解决办法:build phases-> compile sources &q ...
- Element UI样式无法修改解决方法。
最近在做的项目中要用到Element UI组件来写,非常方便,但毕竟Element UI是有它自己的默认样式的,并不是客户所要求的,但就在我想要修改样式时遇到了棘手的问题. 如何引入和使用 Eleme ...
- 当git上文件名大小写重命名的修改时(git大小写敏感/默认不敏感),如何重命名并提交
git默认是大小写不敏感!!! 加了感叹号是什么意思呢,意思就是这本身就是一个坑,本人使用的IDE是idea(网上说Eclipse可以避开问题),这个IDE本身就集成了git,但是如果要在termin ...
- [LeetCode&Python] Problem 744. Find Smallest Letter Greater Than Target
Given a list of sorted characters letters containing only lowercase letters, and given a target lett ...