vue2使用组合API
目标：在vue2项目中使用compositionAPI
大致步骤：
- 安装
@vue/composition-api - 注册插件
- 使用组合API
落地代码：
- 安装
yarn add @vue/composition-api
- 注册插件
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
- 使用组合API
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
+ {{count}} <button @click="count++">+1</button>
</div>
</template>
<script>
+import { ref } from '@vue/composition-api'
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
},
+ setup() {
+ const count = ref(0)
+ return { count}
+ }
}
</script>
vite脚手架
目标：了解vite是什么，使用vite创建vue项目
vite是什么：官方文档
- 它是一个更加轻量（热更新速度快，打包构建速度快）的vue项目脚手架工具。
- 相对于vue-cli它默认安装的插件非常少，随着开发过程依赖增多，需要自己额外配置。
- 所以： 在单纯学习vue3语法会使用它，后面做项目的时候我们还是使用vue-cli
vite基本使用：
- 创建项目
npm init vite-app 项目名称或者yarn create vite-app 项目名称 - 安装依赖
npm i或者yarn - 启动项目
npm run dev或者yarn dev
总结： vite是什么？
- 基于ES6模块化的脚手架，热更新和打包速度很快。
vue3简易状态共享
目标：通过响应式状态模块，实现简易状态共享
- 状态模块
import { reactive } from "vue";
export default reactive({
count: 0
})
- A组件
<template>
<h1>HelloWorld {{store.count}}</h1>
</template>
<script>
import store from "../store";
export default {
name: "HelloWorld",
setup() {
return { store };
},
};
</script>
- B组件
<template>
<div>Counter组件 {{store.count}} <button @click="store.count++">+1</button></div>
</template>
<script>
import store from "../store";
export default {
name: "Counter",
setup() {
return { store };
},
};
</script>
注意：
- 这种方式对应大型应用不友好，且不支持SSR
pinia体验
目的：体验一下pinia状态管理
1）安装pinia插件
yarn add pinia
2）注册pinia插件 main.js
import { createPinia } from 'pinia'
createApp(App).use(createPinia()).mount('#app')
3）创建store
store/counter.js
import { defineStore } from "pinia";
export default defineStore("counter", {
// 状态
state() {
return {
count: 0,
};
},
// mutations + actions 函数，可以执行异步和同步操作
actions: {
increment() {
this.count++;
},
},
// 计算属性
getters: {
doubleCount() {
return this.count * 2;
},
},
});
4）组件使用 app.vue
<template>
<div>
<p>{{store.count}}</p>
<p>{{store.doubleCount}}</p>
<button @click="store.increment">+1</button>
</div>
</template>
<script>
import useCounterStore from './store/counter'
export default {
name: 'App',
setup () {
const store = useCounterStore()
return { store }
}
}
</script>
总结：
- pinia是趋势还可以，vue3 + TS + pinia 组合开发是不错的选择。
前端mock
目的：体验前端mock接口数据
1）安装
yarn add axios mockjs
2）发送请求 App.vue
import axios from "axios";
export default {
name: "App",
setup() {
axios
.get("/list")
.then((data) => {
console.log(data);
})
.catch((e) => {
console.log(e);
});
},
};
3）mock数据 mock/index.js
import Mock from "mockjs";
Mock.mock("/list", () => {
const list = [];
for (let i = 0; i < 10; i++) {
list.push({
id: Mock.mock('@id'),
name: Mock.mock('@cname'),
age: Mock.mock('@integer(20,30)'),
city: Mock.mock('@city(true)'),
picture: Mock.mock('@image')
});
}
return {
message: "获取数据成功",
result: list,
};
});
4）使用mock main.js
import './mock'
总结：
- 前期开发后台接口没更上，可以先mock数据，开发完毕注释导入的mock文件即可。
