手写MVVM框架-环境搭建

项目使用 webpack 进行进行构建，初始化步骤如下:

1.创建npm项目执行npm init 一直下一步就行

2.安装webpack、webpack-cli、webpack-dev-server，html-webpack-plugin

npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin

3.配置webpack、创建webpack.config.js 、配置启动命令

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {mode: 'development',entry: './src/index.js',output: {filename: 'bundle.js',path: __dirname + '/dist',library: 'Aue' // 暴露一个全局变量},devServer: {hot: true,port: 3000},resolve: { // 解析规则extensions: ['.js'] // 在js文件中引用其他js文件可以不用写后缀名
},plugins: [new HtmlWebpackPlugin({template: path.resolve(__dirname, 'public/index.html')})]
}

{"name": "mini-vue","version": "1.0.0","description": "","scripts": {"dev": "webpack-dev-server --config webpack.config.js","build": "webpack --config webpack.config.js --mode production"},"author": "","license": "ISC","devDependencies": {"html-webpack-plugin": "^5.6.3","webpack": "^5.97.1","webpack-cli": "^6.0.1","webpack-dev-server": "^5.2.0"}
}

创建调试的html页面

根目录创建public文件夹，并在文件夹内部创建index.html，里面的代码如下（bundle.js 是webpack打包的mvvm代码)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div id="container">Hello World {{name}} {{description}}<div class="des">{{description}}</div></div><script src="./bundle.js"></script></body>
</html>