Vue-cli如何实现移动端布局与动画的详细操作与技巧？
- 内容介绍
- 文章标签
- 相关推荐
本文共计2370个文字，预计阅读时间需要10分钟。
vue-cli（重点）+vue-cli是用于管理vue项目的工具，可快速创建、启动、编译项目等操作。常见的vue全家桶指vue-cli、vue-router、vuex、vue-resource等。vue的单一文件组件
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('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: "www.wyyijiaqin.com", pathRewrite: { '^/api': '' }, changeOrigin: true, } } } }
修改 vue.config.js 后，要先 ctrl+c 终止服务，然后 npm run serve 启动服务。
那么 vue 中访问 /api 时，实际就是跨域访问 www.wyyijiaqin.com 了
import axios from "axios"; export default { methods:{ fn(){ // 直接访问时，因同源策略，拒绝访问，报错 axios.get('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(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 移动端布局和动画使用详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持易盾网络。
本文共计2370个文字，预计阅读时间需要10分钟。
vue-cli（重点）+vue-cli是用于管理vue项目的工具，可快速创建、启动、编译项目等操作。常见的vue全家桶指vue-cli、vue-router、vuex、vue-resource等。vue的单一文件组件
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('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: "www.wyyijiaqin.com", pathRewrite: { '^/api': '' }, changeOrigin: true, } } } }
修改 vue.config.js 后，要先 ctrl+c 终止服务，然后 npm run serve 启动服务。
那么 vue 中访问 /api 时，实际就是跨域访问 www.wyyijiaqin.com 了
import axios from "axios"; export default { methods:{ fn(){ // 直接访问时，因同源策略，拒绝访问，报错 axios.get('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(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 移动端布局和动画使用详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持易盾网络。