跳到主要内容

准备

2023年07月21日
柏拉文
越努力，越幸运

一、初始化​

pnpm init

二、构建目录​

2.1 src​

2.2 src/core​

2.3 src/platforms​

三、配置编译​

import RollupPluginCommonjs from '@rollup/plugin-commonjs';
import RollupPluginResolve from '@rollup/plugin-node-resolve';
import RollupPluginTypescript from '@rollup/plugin-typescript';

export default [
  {
    input: 'src/platforms/web/runtime-with-compiler.ts',
    output: [
      {
        name: 'Vue',
        format: 'es',
        sourcemap: true,
        file: './dist/vue.js'
      }
    ],
    plugins: [
      RollupPluginResolve(),
      RollupPluginCommonjs(),
      RollupPluginTypescript({
        sourceMap: true
      })
    ]
  }
];

四、配置校验​

{
  "compilerOptions": {
    "strict": true,         
    "baseUrl": ".",
    "target": "es5",
    "allowJs": false,
    "outDir": "dist",
    "sourceMap": false,
    "module": "esnext",  
    "skipLibCheck": true,
    "noImplicitAny":false,
    "esModuleInterop": true,
    "noUnusedLocals": false,
    "removeComments": false,
    "resolveJsonModule": true,
    "noUnusedParameters": false,
    "downlevelIteration": true,
    "moduleResolution": "node",
    "lib": ["esnext","dom"],
    "paths": {
      "compiler/*": ["src/compiler/*"],
      "core/*": ["src/core/*"],
      "server/*": ["packages/server-renderer/src/*"],
      "sfc/*": ["packages/compiler-sfc/src/*"],
      "shared/*": ["src/shared/*"],
      "web/*": ["src/platforms/web/*"],
      "v3": ["src/v3/index"],
      "v3/*": ["src/v3/*"],
      "types/*": ["src/types/*"],
      "vue": ["src/platforms/web/entry-runtime-with-compiler"]
    },
    "forceConsistentCasingInFileNames": true,          
  },
  "include": ["src", "packages/*/src"]
}

五、项目管理​

{
  "type": "module",
  "name": "vue-mini",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "push": "git add . && git commit -m 推送 && git push origin master",
    "pull": "git fetch --all && git reset --hard origin/master && git pull origin master"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@rollup/plugin-commonjs": "^25.0.3",
    "@rollup/plugin-node-resolve": "^15.1.0",
    "@rollup/plugin-typescript": "^11.1.2",
    "rollup": "^3.26.3",
    "tslib": "^2.6.0",
    "typescript": "^5.1.6"
  }
}

六、其他配置​

6.1 .gitignore​

# Dependencies
/node_modules

# Generated files
.docusaurus
.cache-loader

# Misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

6.2 .prettierrc​

{
    "semi": true,
    "singleQuote": true,
    "printWidth": 80,
    "trailingComma": "none",
    "arrowParens": "avoid"
}

6.3 .prettierignore​

dist

七、运行调试​

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue</title>
    <script type="importmap">
        {
            "imports":{
                "vue": "../dist/vue.esm.js"
            }
        }
    </script>
    <script>
        var process = {
            env: {
                NODE_ENV: 'development',
            }
        }
    </script>
</head>
<body>
    <div id="app">
        {{ msg }}
    </div>
    <script type="module">
      import Vue from "vue";

      const app = new Vue({
        el: "#app",
        data:{
            msg: "Hello World"
        },
        mounted(){
            setTimeout(()=>{
                this.msg = "Hello World Update"
            },2000);
        }
      });
      
    </script>
</body>
</html>