{"repo":"Wscats/vue-cli","free":true,"listed":false,"github":"https://github.com/Wscats/vue-cli","clone":"git clone https://github.com/Wscats/vue-cli.git","description":"📃基于 Vue3.0 Composition Api 快速构建实战项目","language":"Vue","stars":489,"topics":["vue3","hooks","vue-function-api","vue-composition-api","vue","cnode","axios","webpack","vuex"],"license":null,"category":"cli-tools","readme_excerpt":"Quick Start - 项目源码: https://github.com/Wscats/vue-cli 本项目综合运用了 Vue3.0 的新特性，适合新手学习😁 - 基于 Composition API 即 Function-based API 进行改造，配合 Vue Cli ，优先体验 Vue3 特性 - 使用单例对象模式进行组件通信 - 使用 axios 库进行网络请求， weui 库实现 UI 界面 建议配合 Visual Studio Code 和 Vue 3 Snippets 代码插件食用Ψ(￣∀￣)Ψ。 Dependencies 以下是项目运用到的依赖， @vue/composition-api 配合 vue 模块让我们 Vue2.0 版本可以抢先体验 Vue3.0 的新特性， axios 是辅助我们发送网络请求得到数据的工具库， weui 是一套与微信原生视觉一致的基础样式库，方便我们快速搭建项目页面。 Directory Structure Composition API 使用 npm 命令下载了 @vue/composition-api 插件以后，引入该模块后，需要显式调用 Vue.use(VueCompositionApi) ，按照文档在 main.js 引用便开启了 Composition API 的能力。 我们同样使用 npm 安装 weui 模块，然后在 main.js 中引入 weui 的基础样式库，方便我们可以在全局使用微信基础样式构建项目页面。 回到 App.vue ，保留 components 属性值清空 模板的内容，删除 模板，等待重新引入新的组件。 在 src/components 目录下新建第一个组件，取名为 Header.vue 写入以下代码，点击查看源代码： --- setup 这里运用了一个全新的属性 setup ，这是一个组件的入口，让我们可以运用 Vue3.0 暴露的新接口，它运行在组件被实例化时候， props 属性被定义之后，实际上等价于 Vue2.0 版本的 beforeCreate 和 Created 这两个生命周期， setup 返回的是一个对象，里面的所有被返回的属性值，都会被合并到 Vue2.0 的 render 渲染函数里面，在单文件组件中，它将配合 模板的内容，完成 Model 到 View 之间的绑定，在未来版本中应该还会支持返回 JSX 代码片段。 reactive 在 setup 函数里面， 我们适应了 Vue3.0 的第一个新接口 reactive 它主要是处理你的对象让它经过 Proxy 的加工变为一个响应式的对象，类似于 Vue2.0 版本的 data 属性，需要注意的是加工后的对象跟原对象是不相等的，并且加工后的对象属于深度克隆的对象。 props 在 Vue2.0 中我们可以使用 props 属性值完成父子通信，在这里我们需要定义 props 属性去定义接受值的类型，然后我们可以利用 setup 的第一个参数获取 props 使用。 我们在 App.vue 里面就可以使用该头部组件，有了上面的 props 我们可以根据传进来的值，让这个头部组件呈现不同的状态。 context setup 函数的第二个参数是一个上下文对象，这个上下文对象中包含了一些有用的属性，这些属性在 Vue2.0 中需要通过 this 才能访问到，在 vue3.0 中，访问他们变成以下形式： 具体能访问到以下有用的属性： - root - parent - refs - attrs - ","default_branch":null,"files":null,"tree":[],"storefront":"/r/Wscats","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/Wscats/vue-cli/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}