Vue框架入门与vue-loader、webpack详解-CSDN博客

本文链接：https://blog.csdn.net/u011240016/article/details/100736444

本文介绍Vue的初步使用，包括如何通过传统方式引入并实例化Vue对象，探讨生命周期函数。此外，深入讨论vue-loader和webpack的结合，阐述它们如何允许组件内HTML、JS、CSS的集中编写，提高项目高内聚、低耦合性。文章最后简述了基于脚手架创建的Vue项目结构，并推荐使用yarn进行包管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Time: 20190911

前文提到了大前端的概念，现在的Web应用程序，逻辑变得更加复杂，用户交互更加丰富。前端开发不使用框架，最终项目会变成一个不可维护的代码。

除了核心的vue框架外，还有几个官方实现的库，全方位覆盖了Vue项目开发需要用到的核心功能。

如：vue-router用于路由控制，vuex用于状态管理，vue-test-utils用于组件的单元测试。

这三个核心库，会在后续陆续展开讲解。

vue使用初探

<!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>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> 生产环境 -->
</head>
<body>
    <div id="app">
        {{ message + " " + name }}
    </div>

    <script>
        var app = new Vue(
            {
                el: '#app',
                data: {
                    message: 'Hello',
                    name: "DrCrypto",
                },
                created() {
                    // 应用启动时执行
                    console.log("应用启动...")
                }
            }
        )
    </script>
</body>
</html>