背景
到目前,vue 3 gayhub 官选 除了服务端渲染外,大部分工作已经完成了,vue-loader也有了初版,意味着可以去尝鲜了。
目标
基本功能做个todoMVC vue3.0
- 新增
- 编辑
- 删除
- 修改状态
- 展示 (all,active(非active), compeleted(非compeleted))
Gayhub 地址
环境准备
安装 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的兼容还有些问题,不建议业务开发使用。