本项目综合运用了 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.jsimport Vue from 'vue'import App from './App.vue'// 1.引入Composition API模块import VueCompositionApi from '@vue/composition-api'Vue.config.productionTip = false// 2.不要漏了显式调用 VueCompositionApiVue.use(VueCompositionApi)new Vue({ render: h => h(App),}).$mount('#app')
npm install weui --save
我们同样使用 npm 安装 weui 模块,然后在 main.js 中引入 weui的基础样式库,方便我们可以在全局使用微信基础样式构建项目页面。
// main.jsimport Vue from 'vue'import App from './App.vue'// 全局引入 `weui` 的基础样式库import 'weui'import VueCompositionApi from '@vue/composition-api'Vue.config.productionTip = falseVue.use(VueCompositionApi)new Vue({ render: h => h(App),}).$mount('#app')
回到 App.vue,保留 components 属性值清空 模板的内容,删除
Hello World
在 src/components 目录下新建第一个组件,取名为 Header.vue 写入以下代码:
{
{title}}
setup
这里运用了一个全新的属性 setup ,这是一个组件的入口,让我们可以运用 Vue3.0 暴露的新接口&#