手写MVVM框架-环境搭建

海威的技术博客2025-02-02 11:08

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

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

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

html 复制代码

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

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

javascript 复制代码

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')
    })
  ]
}

javascript 复制代码

{
  "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代码)

html 复制代码

<!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>

创建webpack入口文件，目录在根目录 src/index.js 并在webpack中配置入口文件(webpack.config.js)

手写MVVM框架-环境搭建

执行npm run dev 访问http://localhost:3000

Ok！webpack搭建完，下一步开始写代码！！！