├── .gitignore ├── README.md ├── babel.config.js ├── dist ├── css │ ├── app.fc5f47a8.css │ └── chunk-vendors.af3876eb.css ├── favicon.ico ├── index.html └── js │ ├── app.4ab67c5f.js │ ├── app.4ab67c5f.js.map │ ├── chunk-vendors.ec16639b.js │ └── chunk-vendors.ec16639b.js.map ├── package.json ├── public ├── favicon.ico └── index.html ├── screenshot ├── 1.gif ├── 2.gif ├── 3.gif ├── 4.gif ├── 5.gif └── 6.png ├── src ├── App.vue ├── assets │ └── logo.png ├── components │ ├── Header.vue │ ├── Panel.vue │ └── Search.vue ├── main.js └── stores │ └── index.js └── vue.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | # /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Quick Start 2 | 3 | - 项目源码: [https://github.com/Wscats/vue-cli](https://github.com/Wscats/vue-cli) 4 | 5 | 本项目综合运用了 `Vue3.0` 的新特性，适合新手学习😁 6 | 7 | - 基于 `Composition API` 即 `Function-based API` 进行改造，配合 `Vue Cli`，优先体验 `Vue3` 特性 8 | - 使用单例对象模式进行组件通信 9 | - 使用 `axios` 库进行网络请求，`weui` 库实现 UI 界面 10 | 11 | ```bash 12 | # 安装依赖 13 | npm install 14 | # 在浏览器打开localhost:8080查看页面，并实时热更新 15 | npm run serve 16 | # 发布项目 17 | npm run build 18 | ``` 19 | 20 | 建议配合 Visual Studio Code 和 [Vue 3 Snippets](https://github.com/Wscats/vue-snippets) 代码插件食用Ψ(￣∀￣)Ψ。 21 | 22 | # Dependencies 23 | 24 | 以下是项目运用到的依赖，`@vue/composition-api` 配合 `vue` 模块让我们 `Vue2.0` 版本可以抢先体验 `Vue3.0` 的新特性，`axios` 是辅助我们发送网络请求得到数据的工具库，`weui`是一套与微信原生视觉一致的基础样式库，方便我们快速搭建项目页面。 25 | 26 | ```js 27 | "@vue/composition-api": "^0.3.4", 28 | "axios": "^0.19.0", 29 | "core-js": "^3.4.3", 30 | "vue": "^2.6.10", 31 | "weui": "^2.1.3" 32 | ``` 33 | 34 | # Directory Structure 35 | 36 | ```js 37 | ├── src 38 | │ ├── App.vue # 组件入口 39 | │ ├── assets # 资源目录 40 | │ ├── stores/index.js # 状态管理 41 | │ ├── components # 组件目录 42 | │ │ ├── Header.vue # 头部组件 43 | │ │ ├── Search.vue # 搜索框组件 44 | │ │ ├── Panel.vue # 列表组件 45 | │ ├── main.js # 项目入口 46 | ├── public # 模板文件 47 | ├── vue.config.js # 脚手架配置文件 48 | ├── screenshot # 程序截图 49 | ``` 50 | 51 | 52 | # Composition API 53 | 54 | ```bash 55 | npm install @vue/composition-api --save 56 | ``` 57 | 58 | 使用 `npm` 命令下载了 `@vue/composition-api` 插件以后，引入该模块后，需要显式调用 `Vue.use(VueCompositionApi)` ，按照文档在 `main.js` 引用便开启了 `Composition API` 的能力。 59 | ```js 60 | // main.js 61 | import Vue from 'vue' 62 | import App from './App.vue' 63 | // 1.引入Composition API模块 64 | import VueCompositionApi from '@vue/composition-api' 65 | 66 | Vue.config.productionTip = false 67 | // 2.不要漏了显式调用 VueCompositionApi 68 | Vue.use(VueCompositionApi) 69 | 70 | new Vue({ 71 | render: h => h(App), 72 | }).$mount('#app') 73 | ``` 74 | 75 | 76 | ```bash 77 | npm install weui --save 78 | ``` 79 | 80 | 我们同样使用 `npm` 安装 `weui` 模块，然后在 `main.js` 中引入 `weui`的基础样式库，方便我们可以在全局使用微信基础样式构建项目页面。 81 | 82 | ```js 83 | // main.js 84 | import Vue from 'vue' 85 | import App from './App.vue' 86 | // 全局引入 `weui` 的基础样式库 87 | import 'weui' 88 | import VueCompositionApi from '@vue/composition-api' 89 | 90 | Vue.config.productionTip = false 91 | Vue.use(VueCompositionApi) 92 | 93 | new Vue({ 94 | render: h => h(App), 95 | }).$mount('#app') 96 | ``` 97 | 98 | 回到 `App.vue`，保留 `components` 属性值清空 `