Vue 3 SFC 来实现一个todoMVC

2,082 阅读2分钟

背景

到目前,vue 3 gayhub 官选 除了服务端渲染外,大部分工作已经完成了,vue-loader也有了初版,意味着可以去尝鲜了。

目标

做个todoMVC vue3.0

基本功能

  • 新增
  • 编辑
  • 删除
  • 修改状态
  • 展示 (all,active(非active), compeleted(非compeleted))

Gayhub 地址

github.com/CharlieLau/…

环境准备

安装 webpack vue-loader alpha 安装新版 vue

mkdir  todolist-vue3 &&  cd  todolist-vue3 && npm init -y
yarn add  webpack  webpack-cli  webpack-dev-server vue-loader@16.0.0-alpha.1 @vue/compiler-sfc@3.0.0-alpha.1 --dev
yarn add  todomvc-app-css todomvc-common vue@3.0.0-alpha.1
mkdir  src && touch src/index.js

webpack.config.js

配置下入口 source map 方便调试 vue loader 主要解析 SFC 组件

const path = require('path')
const {
    VueLoaderPlugin
} = require('vue-loader')

module.exports = {
    entry: './src/index.js',
    module: {
        rules: [{
            test: /\.vue$/,
            use: 'vue-loader'
        }]
    },
    devtool: 'source-map',
    resolve: {
        extensions: ['.vue', '.js'],
        alias: {
            'vue': '@vue/runtime-dom'
        }
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'build'),
    },
    devServer: {
        inline: true,
        hot: true,
        stats: 'minimal',
        contentBase: __dirname,
        overlay: true
    },
    plugins: [
        new VueLoaderPlugin()
    ],
}

index.html

引入 todomvc的样式包 及打包好的bundle.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="node_modules/todomvc-common/base.css">
	<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
</head>
<body>
    <div id="app"></div>
    <script src="bundle.js"></script>
</body>
</html>

App.vue

<template>
   <div>hello world</div>
</template>
<script>
    export default {
    }
</script>


index.js


import { createApp } from 'vue'
import App from './App.vue'

createApp().mount(App, '#app')

组件拆分

接口定义

定义对外暴漏的state和函数

interface Todo{  //todo 项
	id:number
  title:string
  compeleted:boolean
}
const noop=()=>{}
interface TodosProvider{
	state={
  	todos:Todo[]
    visibility:string
    newTodo:Todo,
    editTodo:Todo,
  }
  addTodo:noop
  removeTodo:noop
  cancelEdit:noop
  doneEdit:noop
 	handleEditTodo:noop
  switchVisiBility:noop
}

编写服务

看 gayhub 吧, 表述不如自己理解

总结

总体感觉比2.0香~~

拆分业务和组件交互逻辑。这样的好处: 关注点分离,业务逻辑也可以复用。

目前工程化还在完善中。

目前这版本还没有导出vue.d.ts ,所以木办法使用 TS,如果能使用ts,可能更香。

目前对2.0的兼容还有些问题,不建议业务开发使用。