Vue3组件化开发（⼀）&（二） | webpack

Vue3组件化开发（⼀）&（二）

---

Vue3的表单和开发模式

知识补充：
浅拷贝：

深拷贝：

v-model的基本使用

原理

详细用法可以查看文档：

要多查看文档！！

关于组件这部分 可以查看文档和代码学习

vue的开发模式

浅学webpack

webpack基础打包

认识webpack

webpack安装

基本打包

src/js/math.js

// ES Module
export const sum = function (a, b) {
    return a + b
}

src/js/format.js

const formatPrice = function () {
    return "¥99.00"
}
// Common JS
module.exports = {
    formatPrice
}

index.js

import { sum } from './js/math'
const { formatPrice } = require('./js/format')

console.log(sum(20, 30))
console.log(formatPrice())

index.html

<script src="./index.js" type="module"></script>

index.html

<script src="../dist/main.js"></script>

webpack局部安装和打包

webpack.config.js

const path = require('path')

module.exports = {
    entry: "./src/main.js",
    output: {
        path: path.resolve(__dirname, "./build"),
        filename: "bundle.js"
    }
}

webapck 依赖图

此时 页面上显示了文字！

css-loader

style-loader

less-loader

认识PostCSS工具

postcss-preset-env