Vue-cli 移动端布局和动画使用详解


Posted in Javascript onAugust 10, 2020

vue-cli(重点)

vue-cli 是用来管理 vue 项目的工具,可以使用 vue-cli 快速创建项目、启动项目、编译项目等操作。

常说的vue全家桶指:vue-cli、vue-router、vuex、vue-resource。

vue的单文件组件扩展名是.vue文件,需要借助vue-loader,才能被正常解析。

vue-cli 3 (新版本)

如果之前安装过低版本的 vue-cli ,那么命令行执行:

npm uninstall vue-cli -g

然后安装

npm install -g @vue/cli

然后检查版本

vue --version

创建项目

vue create myapp

命令之后后会让我们选择预设:选默认的default即可,Manually指手动自定义,然后选择npm管理包。

项目创建后,cd进入到项目后,runserve运行项目,这样在浏览器中就可以看到效果了。

cd myapp

npm run serve

然后在 src 目录下正常的开发项目就可以了,src/main.js 是入口页面。

// 设置为 false 以阻止 vue 在启动时生成生产提示。

Vue.config.productionTip = false

项目开发完毕之后,需要打包

npm run build

dist目录下的文件,就是生产环境下的文件。

vue-cli 2 (旧版本)

# 旧版本:基于 webpack 创建 vue 项目
npm install vue-cli -g
vue init webpack-simple appname 
cd appname
npm install
npm run dev

npm run build

项目结构及文件介绍

public/index.html 是浏览器访问的入口页面。

src 目录下保存的是开发环境中的碎片化文件。

package.json

在 package.json 中有 eslintConfig 属性,修改 rules 规则,允许项目中使用 console。

"rules": {
 "no-console":"off"
}

如何在项目中使用 axios

在 vue 中,通常使用 axios 来发起请求,获取响应。

npm install axios -S

每当使用 npm install 下载依赖模块时,最好加上参数 -S 或 -D

-S 表示最终 build 打包时,将 axios 的源码也合并到一起。

package.json 中有 dependencies 和 devDependencies,分别表示生产环境依赖,和开发环境依赖。

{
 dependencies:{}, # --save 生产环境 简写 -S
 devDependencies:{} # --save-dev 开发环境 简写 -D
}

// 引入axios
import axios from "axios";

// 直接访问时,因同源策略,拒绝访问,报错
axios.get('http://www.wyyijiaqin.com/').then(res=>{
 console.log(res.data)
})

vue.config.js 的配置

是 vue 项目中的配置页面,需要自己在项目的根目录创建。

myapp/
node_modules/
public/
src/
vue.config.js

proxy 代理

前端跨域访问别人服务器中的某个文件时,因同源策略的问题,我们的前端拿不到别人的数据,这时我们可以使用代理的方案来解决此问题。

在项目根目录,自己创建 vue.config.js 文件,里面写入:

module.exports = {
 devServer: {
 proxy:{
  "/api": {
  target: "http://www.wyyijiaqin.com",
  pathRewrite: { '^/api': '' },
  changeOrigin: true,
  }
 } 
 }
}

修改 vue.config.js 后,要先 ctrl+c 终止服务,然后 npm run serve 启动服务。

那么 vue 中访问 /api 时,实际就是跨域访问 http://www.wyyijiaqin.com 了

import axios from "axios";
export default {
 methods:{
 fn(){
  // 直接访问时,因同源策略,拒绝访问,报错
  axios.get('http://www.wyyijiaqin.com/').then(res=>{
  console.log(res.data)
  })
 },
 async fn2(){
  // 代理访问,能够拿到数据
  var {data} = await axios.get('/api');
  console.log( data )
 }
 }
};

alias 别名

vue.config.js

const path = require("path");
function resolve (dir) {
 return path.join(__dirname, dir)
}

module.exports = {
 chainWebpack: config=>{
 config.resolve.alias
  .set('@$', resolve('src'))
  .set('assets', resolve('src/assets'))
  .set('$comp', resolve('src/components'))
 }
}

使用别名

import HelloWorld from "$comp/HelloWorld.vue";

修改 vue.config.js 后要重新 npm run serve

sass 环境

npm install sass-loader node-sass --save-dev

然后在vue文件中:

<style scoped lang="scss">
$bg : yellow;
body{
 div{
 background: $bg;
 }
}
</style>

当然在 js 文件中也可以使用 import 引入 scss 文件

移动端布局

rem 单位

import 'js/rem.js';

引入 rem.js 文件后,css 中就可以直接写 rem 单位了,改变移动端设备时,宽高会等比例更新。

比如 UI 给的设计稿宽度是 750px 的,其中某个图片宽为 375px,如果用户的手机宽度就是750,那么看到的图片就是375。但是如果用户的手机是 1500 时,图片就应该显示 750,需要进行等比缩放。

如果 UI 给的设计稿宽度是 750px,那么我们应该在 rem.js 中执行的函数的参数设置为 750 ,这样设计稿中的 100px,就等于 1rem 了。

flexbox 布局

弹性盒布局默认是横向分配空间,如果想纵向分配,需设置 flex-direction: column;

div{
 display: flex;
 justify-content: space-around;
 align-items: center;

 li{
 text-align:center;

 a{
  color:white;
  text-decoration: none;
 }

 .router-link-exact-active{
  color: green !important;
 }
 }
}

font-awesome 字体图标

import './assets/font-awesome-4.7.0/css/font-awesome.min.css';

<font class="fa fa-home"></font>

动画

transition 过渡

Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。

transition 是 vue 提供的组件,这个组件的作用是给其子节点添加动画效果。

<style>
 @import url(https://cdn.bootcss.com/animate.css/3.7.0/animate.min.css);
 
 .toast{ 
 transform: translate(-50%,-50%); 
 position: fixed; 
 left: 50%;
 top: 50%; 
 background:black;
 color:white;
 }
</style>
<div id="app">
 <button @click="fn">动画按钮</button>
 <transition
 enter-class=""
 enter-active-class="animated fadeIn"
 enter-to-class=""
 leave-class=""
 leave-active-class="animated fadeOut"
 leave-to-class=""
 >
 <div class="toast" v-if="isShow">Toast</div>
 </transition>
</div>
<script> 
 var app = new Vue({
 el: '#app',  
 data:{
  isShow:true,  
 },
 methods:{
  fn(){
  this.isShow = !this.isShow;
  }
 }
 })
</script>

解读:当toast对应的div被创建到页面上时,transition会给这个div添加enter相关的css样式,当toast这个div从页面上被删除掉的时候,transition会给这个div添加leave相关的css样式,所以transition组件就是做动画设置的组件。

v-if 和 v-show 都可以实现动画。

:duration=“10000” 可设置动画时长,单位毫秒。

enter-class 在第一帧之后就删除了;

enter-to-class 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。

transition-group

transition只能有0个或1个子节点,而transition-group可以有零个或多个子节点。

循环渲染时,必须写key,并且key的值是唯一标识符(不要用数组下标)。

<div id="app">
 <input type="text" v-model="str" />
 <button @click="fn2">添加</button>
 <transition-group
 enter-class=""
 enter-active-class="animated fadeIn"
 enter-to-class=""

 leave-class=""
 leave-active-class="animated fadeOut"
 leave-to-class=""
 >
 <li v-for="(item) in arr" :key="item.id">
  {{item.val}}
  <input type="button" @click="fn3(item.id)" value="del" />
 </li>
 </transition-group>
</div>
<script> 
 var app = new Vue({
 el: '#app',  
 data:{
  str : "",
  arr : []  
 },
 methods:{
  fn2(){
  this.arr.push({"val":this.str, "id":new Date().getTime()});
  },
  fn3( id ){
  var ind = this.arr.findIndex(obj=>obj.id===id);
  this.arr.splice(ind, 1)
  }
 }
 })
</script>

钩子函数

动画回调函数(钩子函数),动画执行的过程中,自动触发的一些函数。

既可以写在 transition 中,也可以写在 transition-group 中。

<transition
 v-on:before-enter="beforeEnter"
 v-on:enter="enter"
 v-on:after-enter="afterEnter"
 v-on:enter-cancelled="enterCancelled"
 
 v-on:before-leave="beforeLeave"
 v-on:leave="leave"
 v-on:after-leave="afterLeave"
 v-on:leave-cancelled="leaveCancelled"
>

钩子函数分两组:

enter 为创建节点前自动执行、创建节点过程中自动执行、创建节点完毕时自动执行、创建节点取消时自动执行。

leave 为删除节点前自动执行、删除节点过程中自动执行、删除节点完毕时自动执行、删除节点取消时自动执行。

methods: {
beforeEnter: function (el) {
console.log(‘进入前', el)
},
enter: function (el, done) {
console.log(‘进入…', el)
setTimeout(()=>{ // 要给动画效果预留时长,如果瞬间done(),那么看不到动画效果。
done() // 表示完成动画
}, 2000)
},
afterEnter: function(el){
console.log(‘进入完成', el)
},
enterCancelled: function(el){
console.log(‘取消进入', el)
}
}

EventBus中央事件总线

解决复杂组件关系中,数据维护的问题。

以下为 webpack 管理的 vue 项目中,EventBus 的写法。

eventbus.js

import Vue from 'vue'
const eventbus = new Vue();
export default eventbus;

main.js

import eventbus from './eventbus.js'

Vue.prototype.$eventbus = eventbus

任意组件A(监听事件)

mounted(){ this.$eventbus.$on("fnName", function(payload){ }) }

任意组件B(触发事件)

this.$eventbus.$emit("fnName", {a:2})

以上这篇Vue-cli 移动端布局和动画使用详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
比较全的JS checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
JavaScript Event学习第八章 事件的顺序
Feb 07 Javascript
javascript中substr,substring,slice.splice的区别说明
Nov 25 Javascript
浅谈js的setInterval事件
Dec 05 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
Jan 21 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
Oct 13 Javascript
vue中实现methods一个方法调用另外一个方法
Feb 08 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
Jun 25 Javascript
详解三种方式解决vue中v-html元素中标签样式
Nov 22 Javascript
小程序实现投票进度条
Nov 20 Javascript
vue实现按钮切换图片
Jan 20 Vue.js
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
Aug 10 #Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 #Javascript
浅谈实现在线预览PDF的几种解决办法
Aug 10 #Javascript
如何利用JavaScript编写更好的条件语句详解
Aug 10 #Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
Aug 10 #Javascript
js实现计算器功能
Aug 10 #Javascript
js实现盒子拖拽动画效果
Aug 09 #Javascript
You might like
php中判断一个字符串包含另一个字符串的方法
2007/03/19 PHP
php面向对象中static静态属性与方法的内存位置分析
2015/02/08 PHP
php实现推荐功能的简单实例
2019/09/29 PHP
对table和ul实现js分页示例分享
2014/02/24 Javascript
javascript动态修改Li节点值的方法
2015/01/20 Javascript
深入学习JavaScript对象
2015/10/13 Javascript
JavaScript实现解析INI文件内容的方法
2016/11/17 Javascript
js仿百度音乐全选操作
2017/01/13 Javascript
基本DOM节点操作
2017/01/17 Javascript
angularjs结合html5实现拖拽功能
2018/06/25 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
2018/11/12 Javascript
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
2020/08/04 Javascript
js实现碰撞检测
2021/01/29 Javascript
python实现bitmap数据结构详解
2014/02/17 Python
python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)
2014/04/25 Python
python检索特定内容的文本文件实例
2018/06/05 Python
python消除序列的重复值并保持顺序不变的实例
2018/11/08 Python
python实现贪吃蛇小游戏
2020/03/21 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
Python: 传递列表副本方式
2019/12/19 Python
keras-siamese用自己的数据集实现详解
2020/06/10 Python
sklearn和keras的数据切分与交叉验证的实例详解
2020/06/19 Python
如何使用 Python 读取文件和照片的创建日期
2020/09/05 Python
印尼极简主义和实惠的在线家具店:Fabelio
2019/03/27 全球购物
启动一个线程是用run()还是start()
2016/12/25 面试题
应届生人事助理求职信
2013/11/09 职场文书
大学生暑期实践感言
2014/02/26 职场文书
2014年3.15团委活动总结
2014/03/16 职场文书
司仪主持词两篇
2014/03/22 职场文书
共产党员承诺书
2014/03/25 职场文书
《称象》教学反思
2014/04/25 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
2016年习总书记讲话学习心得体会
2016/01/20 职场文书
《自己去吧》教学反思
2016/02/16 职场文书