vue-cli（重點(diǎn)）

vue-cli 是用來(lái)管理 vue 項(xiàng)目的工具，可以使用 vue-cli 快速創(chuàng)建項(xiàng)目、啟動(dòng)項(xiàng)目、編譯項(xiàng)目等操作。

常說(shuō)的vue全家桶指：vue-cli、vue-router、vuex、vue-resource。

vue的單文件組件擴(kuò)展名是.vue文件，需要借助vue-loader，才能被正常解析。

vue-cli 3 （新版本）

如果之前安裝過(guò)低版本的 vue-cli ，那么命令行執(zhí)行：

npm uninstall vue-cli -g

然后安裝

npm install -g @vue/cli

然后檢查版本

vue --version

創(chuàng)建項(xiàng)目

vue create myapp

命令之后后會(huì)讓我們選擇預(yù)設(shè)：選默認(rèn)的default即可，Manually指手動(dòng)自定義，然后選擇npm管理包。

項(xiàng)目創(chuàng)建后，cd進(jìn)入到項(xiàng)目后，runserve運(yùn)行項(xiàng)目，這樣在瀏覽器中就可以看到效果了。

cd myapp

npm run serve

然后在 src 目錄下正常的開(kāi)發(fā)項(xiàng)目就可以了，src/main.js 是入口頁(yè)面。

// 設(shè)置為 false 以阻止 vue 在啟動(dòng)時(shí)生成生產(chǎn)提示。

Vue.config.productionTip = false

項(xiàng)目開(kāi)發(fā)完畢之后，需要打包

npm run build

dist目錄下的文件，就是生產(chǎn)環(huán)境下的文件。

vue-cli 2 （舊版本）

# 舊版本：基于 webpack 創(chuàng)建 vue 項(xiàng)目
npm install vue-cli -g
vue init webpack-simple appname 
cd appname
npm install
npm run dev

npm run build

項(xiàng)目結(jié)構(gòu)及文件介紹

public/index.html 是瀏覽器訪問(wèn)的入口頁(yè)面。

src 目錄下保存的是開(kāi)發(fā)環(huán)境中的碎片化文件。

package.json

在 package.json 中有 eslintConfig 屬性，修改 rules 規(guī)則，允許項(xiàng)目中使用 console。

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

如何在項(xiàng)目中使用 axios

在 vue 中，通常使用 axios 來(lái)發(fā)起請(qǐng)求，獲取響應(yīng)。

npm install axios -S

每當(dāng)使用 npm install 下載依賴(lài)模塊時(shí)，最好加上參數(shù) -S 或 -D

-S 表示最終 build 打包時(shí)，將 axios 的源碼也合并到一起。

package.json 中有 dependencies 和 devDependencies，分別表示生產(chǎn)環(huán)境依賴(lài)，和開(kāi)發(fā)環(huán)境依賴(lài)。

{
 dependencies:{}, # --save 生產(chǎn)環(huán)境 簡(jiǎn)寫(xiě) -S
 devDependencies:{} # --save-dev 開(kāi)發(fā)環(huán)境 簡(jiǎn)寫(xiě) -D
}

// 引入axios
import axios from "axios";

// 直接訪問(wèn)時(shí)，因同源策略，拒絕訪問(wèn)，報(bào)錯(cuò)
axios.get('http://www.wyyijiaqin.com/').then(res=>{
 console.log(res.data)
})

vue.config.js 的配置

是 vue 項(xiàng)目中的配置頁(yè)面，需要自己在項(xiàng)目的根目錄創(chuàng)建。

myapp/
node_modules/
public/
src/
vue.config.js

proxy 代理

前端跨域訪問(wèn)別人服務(wù)器中的某個(gè)文件時(shí)，因同源策略的問(wèn)題，我們的前端拿不到別人的數(shù)據(jù)，這時(shí)我們可以使用代理的方案來(lái)解決此問(wèn)題。

在項(xiàng)目根目錄，自己創(chuàng)建 vue.config.js 文件，里面寫(xiě)入：

module.exports = {
 devServer: {
 proxy:{
  "/api": {
  target: "http://www.wyyijiaqin.com",
  pathRewrite: { '^/api': '' },
  changeOrigin: true,
  }
 } 
 }
}

修改 vue.config.js 后，要先 ctrl+c 終止服務(wù)，然后 npm run serve 啟動(dòng)服務(wù)。

那么 vue 中訪問(wèn) /api 時(shí)，實(shí)際就是跨域訪問(wèn) http://www.wyyijiaqin.com 了

import axios from "axios";
export default {
 methods:{
 fn(){
  // 直接訪問(wèn)時(shí)，因同源策略，拒絕訪問(wèn)，報(bào)錯(cuò)
  axios.get('http://www.wyyijiaqin.com/').then(res=>{
  console.log(res.data)
  })
 },
 async fn2(){
  // 代理訪問(wèn)，能夠拿到數(shù)據(jù)
  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 環(huán)境

npm install sass-loader node-sass --save-dev

然后在vue文件中：

<style scoped lang="scss">
$bg : yellow;
body{
 div{
 background: $bg;
 }
}
</style>

當(dāng)然在 js 文件中也可以使用 import 引入 scss 文件

移動(dòng)端布局

rem 單位

import 'js/rem.js';

引入 rem.js 文件后，css 中就可以直接寫(xiě) rem 單位了，改變移動(dòng)端設(shè)備時(shí)，寬高會(huì)等比例更新。

比如 UI 給的設(shè)計(jì)稿寬度是 750px 的，其中某個(gè)圖片寬為 375px，如果用戶(hù)的手機(jī)寬度就是750，那么看到的圖片就是375。但是如果用戶(hù)的手機(jī)是 1500 時(shí)，圖片就應(yīng)該顯示 750，需要進(jìn)行等比縮放。

如果 UI 給的設(shè)計(jì)稿寬度是 750px，那么我們應(yīng)該在 rem.js 中執(zhí)行的函數(shù)的參數(shù)設(shè)置為 750 ，這樣設(shè)計(jì)稿中的 100px，就等于 1rem 了。

flexbox 布局

彈性盒布局默認(rèn)是橫向分配空間，如果想縱向分配，需設(shè)置 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 字體圖標(biāo)

import './assets/font-awesome-4.7.0/css/font-awesome.min.css';

<font class="fa fa-home"></font>

動(dòng)畫(huà)

transition 過(guò)渡

Vue 在插入、更新或者移除 DOM 時(shí)，提供多種不同方式的應(yīng)用過(guò)渡效果。

transition 是 vue 提供的組件，這個(gè)組件的作用是給其子節(jié)點(diǎn)添加動(dòng)畫(huà)效果。

<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">動(dòng)畫(huà)按鈕</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>

解讀：當(dāng)toast對(duì)應(yīng)的div被創(chuàng)建到頁(yè)面上時(shí)，transition會(huì)給這個(gè)div添加enter相關(guān)的css樣式，當(dāng)toast這個(gè)div從頁(yè)面上被刪除掉的時(shí)候，transition會(huì)給這個(gè)div添加leave相關(guān)的css樣式，所以transition組件就是做動(dòng)畫(huà)設(shè)置的組件。

v-if 和 v-show 都可以實(shí)現(xiàn)動(dòng)畫(huà)。

:duration=“10000” 可設(shè)置動(dòng)畫(huà)時(shí)長(zhǎng)，單位毫秒。

enter-class 在第一幀之后就刪除了；

enter-to-class 定義進(jìn)入過(guò)渡的結(jié)束狀態(tài)。在元素被插入之后下一幀生效 (與此同時(shí) v-enter 被移除)，在過(guò)渡/動(dòng)畫(huà)完成之后移除。

transition-group

transition只能有0個(gè)或1個(gè)子節(jié)點(diǎn)，而transition-group可以有零個(gè)或多個(gè)子節(jié)點(diǎn)。

循環(huán)渲染時(shí)，必須寫(xiě)key，并且key的值是唯一標(biāo)識(shí)符（不要用數(shù)組下標(biāo)）。

<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>

鉤子函數(shù)

動(dòng)畫(huà)回調(diào)函數(shù)（鉤子函數(shù)），動(dòng)畫(huà)執(zhí)行的過(guò)程中，自動(dòng)觸發(fā)的一些函數(shù)。

既可以寫(xiě)在 transition 中，也可以寫(xiě)在 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"
>

鉤子函數(shù)分兩組：

enter 為創(chuàng)建節(jié)點(diǎn)前自動(dòng)執(zhí)行、創(chuàng)建節(jié)點(diǎn)過(guò)程中自動(dòng)執(zhí)行、創(chuàng)建節(jié)點(diǎn)完畢時(shí)自動(dòng)執(zhí)行、創(chuàng)建節(jié)點(diǎn)取消時(shí)自動(dòng)執(zhí)行。

leave 為刪除節(jié)點(diǎn)前自動(dòng)執(zhí)行、刪除節(jié)點(diǎn)過(guò)程中自動(dòng)執(zhí)行、刪除節(jié)點(diǎn)完畢時(shí)自動(dòng)執(zhí)行、刪除節(jié)點(diǎn)取消時(shí)自動(dòng)執(zhí)行。

methods: {
beforeEnter: function (el) {
console.log(‘進(jìn)入前', el)
},
enter: function (el, done) {
console.log(‘進(jìn)入…', el)
setTimeout(()=>{ // 要給動(dòng)畫(huà)效果預(yù)留時(shí)長(zhǎng)，如果瞬間done()，那么看不到動(dòng)畫(huà)效果。
done() // 表示完成動(dòng)畫(huà)
}, 2000)
},
afterEnter: function(el){
console.log(‘進(jìn)入完成', el)
},
enterCancelled: function(el){
console.log(‘取消進(jìn)入', el)
}
}

EventBus中央事件總線

解決復(fù)雜組件關(guān)系中，數(shù)據(jù)維護(hù)的問(wèn)題。

以下為 webpack 管理的 vue 項(xiàng)目中，EventBus 的寫(xiě)法。

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（監(jiān)聽(tīng)事件）

mounted(){ this.$eventbus.$on("fnName", function(payload){ }) }

任意組件B（觸發(fā)事件）

this.$eventbus.$emit("fnName", {a:2})

以上這篇Vue-cli 移動(dòng)端布局和動(dòng)畫(huà)使用詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。