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 （舊版本）
# 舊版本：基於 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(‘進入完成',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 移動端佈局和動畫使用詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。