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 相关文章推荐
Javascript学习笔记1 数据类型
Jan 11 Javascript
JavaScript自定义事件介绍
Aug 29 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
Jun 16 Javascript
JavaScript中判断函数、变量是否存在
Jun 10 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
Mar 13 Javascript
使用递归遍历对象获得value值的实现方法
Jun 14 Javascript
BootStrap入门教程(二)之固定的内置样式
Sep 19 Javascript
javascript中call()、apply()的区别
Mar 21 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
Apr 30 Javascript
浅谈小程序globalData的那些事儿
Nov 01 Javascript
详解vue页面首次加载缓慢原因及解决方案
Nov 06 Javascript
解决vue-router 切换tab标签关闭时缓存问题
Jul 22 Javascript
在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上传、管理照片示例
2006/10/09 PHP
mysql 查询指定日期时间内sql语句实现原理与代码
2012/12/16 PHP
PHP验证码类ValidateCode解析
2017/01/07 PHP
JavaScript语法着色引擎(demo及打包文件下载)
2007/06/13 Javascript
ext监听事件方法[初级篇]
2008/04/27 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
2014/06/27 Javascript
jQuery实现表格颜色交替显示的方法
2015/03/09 Javascript
JavaScript数组对象赋值用法实例
2015/08/04 Javascript
Bootstrap table 定制提示语的加载过程
2017/02/20 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
详解Vue方法与事件
2017/03/09 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
JS实现简单拖拽效果
2017/06/21 Javascript
vue引入jq插件的实例讲解
2017/09/12 Javascript
requireJS模块化实现返回顶部功能的方法详解
2017/10/16 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
微信小程序之左右布局的实现代码
2019/12/13 Javascript
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
python使用post提交数据到远程url的方法
2015/04/29 Python
django 2.0更新的10条注意事项总结
2018/01/05 Python
python求解数组中两个字符串的最小距离
2018/09/27 Python
Python Image模块基本图像处理操作小结
2019/04/13 Python
Django框架获取form表单数据方式总结
2020/04/22 Python
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
String和StringBuffer的区别
2015/08/13 面试题
自荐信格式的六要素
2013/09/21 职场文书
英语感恩演讲稿
2014/01/14 职场文书
一分钟演讲稿
2014/04/30 职场文书
幼儿园教研活动总结
2014/04/30 职场文书
表扬稿范文
2015/01/17 职场文书
党小组考察意见
2015/06/02 职场文书
2015上半年个人工作总结
2015/07/27 职场文书
小学英语教师研修感悟
2015/11/18 职场文书
历史名人教你十五个读书方法,赶快Get起来!
2019/07/18 职场文书
Python中的 No Module named ***问题及解决
2022/07/23 Python