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 异步调用框架 (Part 4 - 链式调用)
Aug 04 Javascript
javascript 伪数组实现方法
Oct 11 Javascript
js判断字符长度以及中英文数字等
Dec 31 Javascript
javascript限制用户只能输汉字中文的方法
Nov 20 Javascript
jQuery实现DIV层收缩展开的方法
Feb 27 Javascript
详解Javascript中的原型OOP
Oct 12 Javascript
原生Javascript插件开发实践
Jan 18 Javascript
Javascript同时声明一连串(多个)变量的方法
Jan 23 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
Sep 10 Javascript
使用typescript构建Vue应用的实现
Aug 26 Javascript
node爬取新型冠状病毒的疫情实时动态
Feb 06 Javascript
基于JavaScript实现控制下拉列表
May 08 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
用缓存实现静态页面的测试
2006/12/06 PHP
PHP企业级应用之常见缓存技术篇
2011/01/27 PHP
解析php中如何调用用户自定义函数
2013/08/06 PHP
php简单的留言板与回复功能具体实现
2014/02/19 PHP
yii框架配置默认controller和action示例
2014/04/30 PHP
PHP中SERIALIZE和JSON的序列化与反序列化操作区别分析
2016/10/11 PHP
PHP tp5中使用原生sql查询代码实例
2020/10/28 PHP
javascript检测页面是否缩放的小例子
2013/05/16 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
2015/03/03 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
2016/05/05 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
用vue和node写的简易购物车实现
2017/04/25 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
JavaScript控制浏览器全屏显示简单示例
2018/07/05 Javascript
[01:00:26]Ti4主赛事胜者组第一天 EG vs NEWBEE 1
2014/07/19 DOTA
python实现csv格式文件转为asc格式文件的方法
2018/03/23 Python
Python简单实现网页内容抓取功能示例
2018/06/07 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
Django 多对多字段的更新和插入数据实例
2020/03/31 Python
Python读取二进制文件代码方法解析
2020/06/22 Python
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
什么是数据库锁?Oracle中都有哪些类型的锁?
2015/08/21 面试题
高中生毕业自我鉴定
2013/10/10 职场文书
酒店值班经理的工作职责范本
2014/02/18 职场文书
餐饮业员工工作决心书
2014/03/11 职场文书
舞蹈专业求职信
2014/06/13 职场文书
学习十八届四中全会依法治国心得体会
2014/11/03 职场文书
2014年教研组工作总结
2014/11/26 职场文书
贷款承诺书
2015/01/20 职场文书
计划生育工作总结2015
2015/04/03 职场文书
铁人纪念馆观后感
2015/06/16 职场文书
员工聘用合同范本
2015/09/21 职场文书
工商局调档介绍信
2015/10/22 职场文书
详细聊聊浏览器是如何看闭包的
2021/11/11 Javascript
Redis全局ID生成器的实现
2022/06/05 Redis