Vue 3 SFC 來實現一個todoMVC

時間 2020-01-17

標籤 vue sfc 實現一個 todomvc 简体版

原文原文鏈接

背景

到目前，vue 3 gayhub 官選除了服務端渲染外，大部分工做已經完成了，vue-loader也有了第一版,意味着能夠去嚐鮮了。css

目標

作個todoMVC vue3.0html

基本功能

新增
編輯
刪除
修改狀態
展現 (all，active(非active), compeleted(非compeleted))

Gayhub 地址

github.com/CharlieLau/…vue

環境準備

安裝 webpack vue-loader alpha 安裝新版 vuenode

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 組件webpack

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.jsgit

<!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和函數github

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
}

複製代碼