Vue3.0 Composition Api如何快速构建实战项目？

Quick Start 项目源码：https://github.com/Wscats/vue-cli 本项目综合运用了 Vue3.0 的新特性，适合新手学习😁 基于 Composition API 即 Function-based API 进行改造，配合 Vue Cli，优先体验 Vue3 特性 使用单例对象模式进行组件通信 使用 axios 库进行网络请求，weui 库实现 UI 界面 # 安装依赖 npm install # 在浏览器打开localhost:8080查看页面，并实时热更新 npm run serve # 发布项目 npm run build 建议配合 Visual Studio Code 和 Vue 3 Snippets 代码插件食用Ψ(￣∀￣)Ψ。 Dependencies 以下是项目运用到的依赖，@vue/composition-api 配合 vue 模块让我们 Vue2.0 版本可以抢先体验 Vue3.0 的新特性，axios 是辅助我们发送网络请求得到数据的工具库，weui是一套与微信原生视觉一致的基础样式库，方便我们快速搭建项目页面。 "@vue/composition-api": "^0.3.4", "axios": "^0.19.0", "core-js": "^3.4.3", "vue": "^2.6.10", "weui": "^2.1.3" Directory Structure ├── src │ ├── App.vue # 组件入口 │ ├── assets # 资源目录 │ ├── stores/index.js # 状态管理 │ ├── components # 组件目录 │ │ ├── Header.vue # 头部组件 │ │ ├── Search.vue # 搜索框组件 │ │ ├── Panel.vue # 列表组件 │ ├── main.js # 项目入口 ├── public # 模板文件 ├── vue.config.js # 脚手架配置文件 ├── screenshot # 程序截图 Composition API npm install @vue/composition-api --save 使用 npm 命令下载了 @vue/composition-api 插件以后，引入该模块后，需要显式调用 Vue.use(VueCompositionApi) ，按照文档在 main.js 引用便开启了 Composition API 的能力。 // main.js import Vue from 'vue' import App from './App.vue' // 1.引入Composition API模块 import VueCompositionApi from '@vue/composition-api' Vue.config.productionTip = false // 2.不要漏了显式调用 VueCompositionApi Vue.use(VueCompositionApi) new Vue({ render: h => h(App), }).$mount('#app') npm install weui --save 我们同样使用 npm 安装 weui 模块，然后在 main.js 中引入 weui的基础样式库，方便我们可以在全局使用微信基础样式构建项目页面。