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

2023-07-19 01:03:04 226

vue-cli（重点）

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

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

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

vue-cli3（新版本）

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

npmuninstallvue-cli-g

然后安装

npminstall-g@vue/cli

然后检查版本

vue--version

创建项目

vuecreatemyapp

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

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

cdmyapp

npmrunserve

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

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

Vue.config.productionTip=false

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

npmrunbuild

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

vue-cli2（旧版本）

#旧版本：基于webpack创建vue项目
npminstallvue-cli-g
vueinitwebpack-simpleappname
cdappname
npminstall
npmrundev

npmrunbuild

项目结构及文件介绍

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

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

package.json

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

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

如何在项目中使用axios

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

npminstallaxios-S

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

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

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

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

//引入axios
importaxiosfrom"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终止服务，然后npmrunserve启动服务。

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

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

alias别名

vue.config.js

constpath=require("path");
functionresolve(dir){
returnpath.join(__dirname,dir)
}

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

使用别名

importHelloWorldfrom"$comp/HelloWorld.vue";

修改vue.config.js后要重新npmrunserve

sass环境

npminstallsass-loadernode-sass--save-dev

然后在vue文件中：


$bg:yellow;
body{
div{
background:$bg;
}
}

当然在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';

动画

transition过渡

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

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



动画按钮

Toast

解读：当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的值是唯一标识符（不要用数组下标）。



添加


{{item.val}}

动画回调函数（钩子函数），动画执行的过程中，自动触发的一些函数。

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

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

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

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

热门推荐

随机推荐