Vue CLI 3.0
最新版本的Vue Cli提供了圖形化界面（GUI）來創(chuàng)建項目练对，可以自定義配置項，比如預(yù)設(shè)功能插件吹害，和配置都通過圖形化點擊的方式完成螟凭，脫離命令行。在創(chuàng)建完工程后可以在圖形化界面中完成插件和依賴的下載它呀。
Vue CLI 3.0
將
npm run dev等命令放到圖形化界面中螺男，后臺調(diào)用CLI命令執(zhí)行，并顯示性能相關(guān)參數(shù)
Vue CLI 3.0
MockJS
- 作用：攔截用戶ajax請求纵穿，返回預(yù)設(shè)模擬數(shù)據(jù)下隧。
// 通過Mock.mock 來模擬數(shù)據(jù)接口
Mock.mock('./api/goodslist', 'get', {
status: 200,
message: '獲取商品信息成功',
data: [1, 2, 3, 4]
})
- async 函數(shù)是 Generator 函數(shù)的語法糖。使用 關(guān)鍵字 async 來表示谓媒，在函數(shù)內(nèi)部使用 await 來表示異步淆院。返回一個promise對象
async getGoodsList() {
const { data: res } = await this.$http.get('./api/goodslist') // 解構(gòu)賦值
console.log(res)
}
- mock中自帶生成隨機數(shù)據(jù)的一些api，自動生成一些數(shù)據(jù)
Mock.mock('./api/goodslist', 'get', {
status: 200,
message: '獲取商品信息成功',
'data|5-10': [
{
id: '@increment(1)',
name: '@cword(2, 8)',
price: '@natural(2, 10)',
count: '@natural(100, 999)',
img: '@dataImage(78x78)'
}
]
})
數(shù)據(jù)
- 還可以自定義隨機生成數(shù)據(jù)的模板
Random.extend({
constellation: function(date) {
var constellations = ['白羊座', '金牛座', '雙子座', '巨蟹座', '獅子座',
'處女座', '天秤座', '天蝎座', '射手座', '摩羯座',
'水瓶座', '雙魚座']
return this.pick(constellations)
}
})
Random.constellation()
// => "水瓶座"
Mock.mock('@CONSTELLATION')
// => "天蝎座"
Mock.mock({
constellation: '@CONSTELLATION'
})
// => { constellation: "射手座" }
Vue3.0
-
install：未正式發(fā)布之前在Vue2的基礎(chǔ)上加一個
vue-function-apinpm install vue-function-api --saveimport { plugin } from 'vue-function-api Vue.use(plugin)
API句惯，類似
react16的Hook函數(shù)土辩，以proxy代替之前的Object.defineProperty來實現(xiàn)數(shù)據(jù)響應(yīng)支救。把之前的data、methods等都寫在setup函數(shù)里面
<template>
<div class="test">
<input type="text" v-model="msg"/>
<p>data: {{ msg }}</p>
<p>computed: {{ msgWrapper }}</p>
<button @click="changeMsg()">changeMsg</button>
</div>
</template>
<script>
// 這里引進來的都是函數(shù)（hook）
import { value, computed, onMounted } from 'vue-function-api'
export default {
// setup 里面寫data methods computed 等
setup () {
const msg = value('hello world')
// 計算屬性
const msgWrapper = computed(() => msg.value + '---hgz')
// 方法
const changeMsg = () => { msg.value = msg.value == 'hello world' ? 'world peace' : 'hello world' }
// 生命周期函數(shù)拷淘，執(zhí)行順序 setup =》外部（Vue2）生命周期函數(shù) =》內(nèi)部生命周期
onMounted(() => { console.log('zzz') })
// 只有在 setup 函數(shù)里面返回的數(shù)據(jù)(data,method,computed)才能在頁面上使用
return {
msg,
msgWrapper,
changeMsg
}
}
}
</script>>
頁面效果
