安装

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开发笔记的更多相关文章

  1. vue-calendar 基于 vue 2.0 开发的轻量,高性能日历组件

    vue-calendar-component 基于 vue 2.0 开发的轻量,高性能日历组件 占用内存小,性能好,样式好看,可扩展性强 原生 js 开发,没引入第三方库 Why Github 上很多 ...

  2. vue cli3.0 结合echarts3.0和地图的使用方法

    echarts 提供了直观,交互丰富,可高度个性化定制的数据可视化图表.而vue更合适操纵数据. 最近一直忙着搬家,就没有更新博客,今天抽出空来写一篇关于vue和echarts的博客.下面是结合地图的 ...

  3. 解决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 ...

  4. 01-路由跳转 安装less this.$router.replace(path) 解决vue/cli3.0语法报错问题

    2==解决vue2.0里面控制台包的一些语法错误. https://www.jianshu.com/p/5e0a1541418b 在build==>webpack.base.conf.j下注释掉 ...

  5. vue cli3.0打包

    1.vue cli3.0需要在项目根目录下配置webpack  包括反向代理以及打包文件路径 const webpack = require("webpack"); module. ...

  6. vue 2.0 开发实践总结之疑难篇

    续上一篇文章:vue2.0 开发实践总结之入门篇 ,如果没有看过的可以移步看一下. 本篇文章目录如下: 1.  vue 组件的说明和使用 2.  vuex在实际开发中的使用 3.  开发实践总结 1. ...

  7. 前端学习日记-vue cli3.0环境搭建

    卸载老版本的 vue-cli : npm uninstall vue-cli -g 安装新版本的 : npm install -g @vue/cli --安装新版本cli 同时nodeJS 要更新至 ...

  8. 使用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 ...

  9. Vue项目构建开发笔记(vue-lic3.0构建的)

    1.router.js里面 { path: '/about', name: 'about', // route level code-splitting // this generates a sep ...

  10. vue cli3.0配制axios代理

    今天学习时,想访问网易新闻接口,结果显而易见,因为跨域被浏览器拒绝了. 去网上找一下结果一开始找到的是2.x版本的配置,生硬的放进去,给我各种报错.编译阶段就炸了.浪费好多时间 再按3.0版本去搜索才 ...

随机推荐

  1. C#图解第七章:类和继承

    1.类继承 通过继承我们可以定义一个新类,新类纳入一个已经声明的类并进行扩展. 1.可以使用- 一个已经存在的类作为新类的基础..已存在的类称为基类(baseclass),新类称为派生类(derive ...

  2. 阶段01Java基础day23多线程

    23.01_多线程(多线程的引入) 1.什么是线程 线程是程序执行的一条路径, 一个进程中可以包含多条线程 多线程并发执行可以提高程序的效率, 可以同时完成多项工作 2.多线程的应用场景 红蜘蛛同时共 ...

  3. Python 自动发送邮件

    简单邮件传输协议(SMTP)是一种协议,用于在邮件服务器之间发送电子邮件和路由电子邮件.Python提供smtplib模块,该模块定义了一个SMTP客户端会话对象,可用于使用SMTP或ESMTP侦听器 ...

  4. python学习 day13 迭代器,生成器,枚举对象

    一.复习 1.闭包:定义在函数内部的函数(被函数嵌套的函数) 2.装饰器:闭包的一个应用场景 -- 为一个函数添加新功能的工具 3.开放封闭原则:不能修改源代码,不能修改调用方式,但可以对外提供增加新 ...

  5. Add和AddRange的使用

    Add 是每次将单个元素添加到集合里面 AddRange可以一次性添加多个元素到集合里面 AddRange例子:         public static int ExecuteCommand(st ...

  6. 官网下载MySQL最新版本的安装包

    下载地址:http://www.mysql.com/downloads/ 1.选择下载社区版本 MySQL Community Edition (GPL)Community (GPL) Downloa ...

  7. 2018年3月底的PTA(二)

    C高级第二次PTA作业(1) 题目6-7 删除字符串中数字字符 1.设计思路 为了偷懒,本题算法和流程图是精简代码后的,具体请看本题实验代码的第二段代码. (1)算法(子函数) 第一步:定义子函数类型 ...

  8. leetcode 846.Hand of Straights

    对于一个数组中的数分为W组且在每一组内的数是连续存在的. 考虑使用map映射来记录每个数的个数的,并且对于数组中的数进行从小到大的排列的.同时每次需要更新最开始的那个起始数的,可能是以及出现的也可能是 ...

  9. linux基础之用户登录信息查看命令

    用户登录信息查看命令 1.who命令 同一个账号通过不同终端登录也属于不同的登录信息,这里不同的终端包含虚拟终端和模拟终端,因为一个用户通过一个终端登录属于一个session 基本介绍 打印当前系统上 ...

  10. SQLI DUMB SERIES-9&&10

    第五关.第八关以及第九关.第十关都是使用盲注,除了第五关说的双注入外,也可使用时间注入法 (1)无论输入啥,都回显相同 (2) ?id=1' and sleep(3) --+ 发现有明显延迟,说明可以 ...