个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 26 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章Vue-cli 移动端布局和动画使用详解由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

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 （旧版本） 。

?
1
2
3
4
5
6
7
8
# 旧版本：基于 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.

?
1
2
3
"rules" : {
  "no-console" : "off"
}

如何在项目中使用 axios 。

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

npm install axios -S 。

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

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

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

?
1
2
3
4
5
6
7
8
9
10
11
12
{
  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 文件，里面写入:

?
1
2
3
4
5
6
7
8
9
10
11
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 了 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
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文件中:

?
1
2
3
4
5
6
7
8
<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,

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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 提供的组件，这个组件的作用是给其子节点添加动画效果.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<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的值是唯一标识符（不要用数组下标）.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<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 中.

?
1
2
3
4
5
6
7
8
9
10
11
< 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 为删除节点前自动执行、删除节点过程中自动执行、删除节点完毕时自动执行、删除节点取消时自动执行.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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 。

?
1
2
3
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 移动端布局和动画使用详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我.

原文链接：https://blog.csdn.net/lff18277233091/article/details/104217850 。

最后此篇关于Vue-cli 移动端布局和动画使用详解的文章就讲到这里了,如果你想了解更多关于Vue-cli 移动端布局和动画使用详解的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

26 4 0
文章推荐： Springboot如何利用拦截器拦截请求信息收集到日志详解
文章推荐： PHP基于PDO实现的SQLite操作类【包含增删改查及事务等操作】
文章推荐： 老生常谈PHP面向对象之标识映射
文章推荐： 解决SpringBoot整合ElasticSearch遇到的连接问题
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com