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 相关文章推荐
IE6 fixed的完美解决方案
Mar 31 Javascript
Textarea根据内容自适应高度
Oct 28 Javascript
JS获取鼠标坐标位置实例分析
Jan 20 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
May 18 Javascript
input输入密码变黑点密文的实现方法
Jan 09 Javascript
php简单数据库操作类的封装
Jun 08 Javascript
手把手搭建安装基于windows的Vue.js运行环境
Jun 12 Javascript
实战node静态文件服务器的示例代码
Mar 08 Javascript
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
傻瓜式解读koa中间件处理模块koa-compose的使用
Oct 30 Javascript
vue实现短信验证码输入框
Apr 17 Javascript
带你彻底理解JavaScript中的原型对象
Apr 14 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
手把手教你打印出PDF(关于fpdf的简单应用)
2013/06/25 PHP
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
ThinkPHP 在阿里云上的nginx.config配置实例详解
2017/10/11 PHP
PHP crypt()函数的用法讲解
2019/02/15 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
2014/05/14 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
Vue.js系列之vue-router(上)(3)
2017/01/03 Javascript
HTML中使背景图片自适应浏览器大小实例详解
2017/04/06 Javascript
JS FormData上传文件的设置方法
2017/07/05 Javascript
Bootstrap Table 删除和批量删除
2017/09/22 Javascript
JavaScript实现数值自动增加动画
2017/12/28 Javascript
node内置调试方法总结
2018/02/22 Javascript
Bootstrap实现可折叠分组侧边导航菜单
2018/03/07 Javascript
JS实现可用滑块滑动的缓动图代码
2019/09/01 Javascript
JavaScript鼠标拖拽事件详解
2020/04/03 Javascript
Openlayers实现测量功能
2020/09/25 Javascript
[02:04]2014DOTA2国际邀请赛 DK一个时代的落幕
2014/07/21 DOTA
跟老齐学Python之再深点,更懂list
2014/09/20 Python
一张图带我们入门Python基础教程
2017/02/05 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
把django中admin后台界面的英文修改为中文显示的方法
2019/07/26 Python
Python Django 简单分页的实现代码解析
2019/08/21 Python
python二维键值数组生成转json的例子
2019/12/06 Python
python递归函数求n的阶乘,优缺点及递归次数设置方式
2020/04/02 Python
配件采购员岗位职责
2013/12/03 职场文书
财政局长自荐信范文
2013/12/22 职场文书
电力安全事故反思
2014/04/27 职场文书
学校校庆演讲稿
2014/05/22 职场文书
计划生育标语
2014/06/23 职场文书
工地例会施工汇报材料
2014/08/22 职场文书
病危通知单
2015/04/17 职场文书
如何撰写促销方案?
2019/07/05 职场文书
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技