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的基础样式库，方便我们可以在全局使用微信基础样式构建项目页面。

// main.js
import Vue from 'vue'
import App from './App.vue'
// 全局引入 `weui` 的基础样式库
import 'weui'
import VueCompositionApi from '@vue/composition-api'

Vue.config.productionTip = false
Vue.use(VueCompositionApi)

new Vue({
   
  render: h => h(App),
}).$mount('#app')

回到 App.vue，保留 components 属性值清空 <template> 模板的内容，删除 <style> 模板，等待重新引入新的组件。

<template>
  <div id="app">
    Hello World
  </div>
</template>
<script>
export default {
    
  name: "app",
  components: {
    }
};
</script>

在 src/components 目录下新建第一个组件，取名为 Header.vue 写入以下代码，点击查看源代码：

<template>
  <header :style="{
      
    backgroundColor: color?color:defaultColor
  }">{
  {title}}</header>
</template>
<script>
import {
     reactive } from "@vue/composition-api";
export default {
    
  // 父组件传递进来更改该头部组件的属性值
  props: {
    
    // 标题
    title: String,
    // 颜色
    color: String
  },
  setup() {
    
    const state = reactive({
    
      defaultColor: "red"
    });
    return {
    
      ...state
    };
  }
};
</script>
<style scoped>
header {
    
  height: 50px;
  width: 100%;
  line-height: 50px;
  text-align: center;
  color: white;
}
</style>

---

setup

这里运用了一个全新的属性 setup ，这是一个组件的入口，让我们可以运用 Vue3.0 暴露的新接口，它运行在组件被实例化时候，props 属性被定义之后，实际上等价于 Vue2.0 版本的 beforeCreate 和 Created 这两个生命周期，setup 返回的是一个对象，里面的所有被返回的属性值，都会被合并到 Vue2.0 的 render 渲染函数里面，在单文件组件中，它将配合 <template> 模板的内容，完成 Model 到 View 之间的绑定，在未来版本中应该还会支持返回 JSX 代码片段。

<template>
  <!-- View -->
  <div>{
  {name}}</div>
</template>
<script>
import {
     reactive } from '@vue/composition-api'