Vue CLI 3.0
最新版本的Vue Cli提供了图形化界面（GUI）来创建项目，可以自定义配置项，比如预设功能插件，和配置都通过图形化点击的方式完成，脱离命令行。在创建完工程后可以在图形化界面中完成插件和依赖的下载。
Vue CLI 3.0
将
npm run dev等命令放到图形化界面中，后台调用CLI命令执行，并显示性能相关参数
Vue CLI 3.0
MockJS
- 作用：拦截用户ajax请求，返回预设模拟数据。
// 通过Mock.mock 来模拟数据接口
Mock.mock('./api/goodslist', 'get', {
status: 200,
message: '获取商品信息成功',
data: [1, 2, 3, 4]
})
- async 函数是 Generator 函数的语法糖。使用 关键字 async 来表示，在函数内部使用 await 来表示异步。返回一个promise对象
async getGoodsList() {
const { data: res } = await this.$http.get('./api/goodslist') // 解构赋值
console.log(res)
}
- mock中自带生成随机数据的一些api，自动生成一些数据
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)'
}
]
})
数据
- 还可以自定义随机生成数据的模板
Random.extend({
constellation: function(date) {
var constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座',
'处女座', '天秤座', '天蝎座', '射手座', '摩羯座',
'水瓶座', '双鱼座']
return this.pick(constellations)
}
})
Random.constellation()
// => "水瓶座"
Mock.mock('@CONSTELLATION')
// => "天蝎座"
Mock.mock({
constellation: '@CONSTELLATION'
})
// => { constellation: "射手座" }
Vue3.0
-
install：未正式发布之前在Vue2的基础上加一个
vue-function-apinpm install vue-function-api --saveimport { plugin } from 'vue-function-api Vue.use(plugin)
API，类似
react16的Hook函数，以proxy代替之前的Object.defineProperty来实现数据响应。把之前的data、methods等都写在setup函数里面
<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>
// 这里引进来的都是函数（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' }
// 生命周期函数，执行顺序 setup =》外部（Vue2）生命周期函数 =》内部生命周期
onMounted(() => { console.log('zzz') })
// 只有在 setup 函数里面返回的数据(data,method,computed)才能在页面上使用
return {
msg,
msgWrapper,
changeMsg
}
}
}
</script>>
页面效果
