Vue全家桶：单文件组件

2023-07-1507:23:44WEB前端开发Comments818 views字数 1126阅读模式

1. 传统组件的问题和解决方案

问题文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51558.html

全局定义的组件必须保证组件的名称不重复
字符串模板缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \
不支持 CSS 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
没有构建步骤限制，只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器（如：Babel）

解决方案文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51558.html

针对传统组件的问题，Vue 提供了一个解决方案:
使用 Vue 单文件组件。

2. Vue 单文件组件的基本用法

单文件组件的组成结构文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51558.html

.template 组件的模板区域
.script 业务逻辑区域
.style 样式区域

<template>

    组件代码区域

</template>

<script>

    js代码区域

</script>

<style scoped>

    样式代码区域

</style>

补充：安装Vetur插件可以使得.vue文件中的代码高亮文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51558.html

3. webpack 中配置 vue 组件的加载器

① 运行 npm i vue-loader vue-template-compiler -D 命令

② 在 webpack.config.js 配置文件中，添加 vue-loader 的配置项如下：

const VueLoaderPlugin = require("vue-loader/lib/plugin");
    const vuePlugin = new VueLoaderPlugin();
    module.exports = {
        ......
        plugins:[ htmlPlugin, vuePlugin  ],
        module : {
            rules:[
                ...//其他规则
                { 
                    test:/\.vue$/,
                    loader:"vue-loader",

                }
            ]
        }
    }

4. 在 webpack 项目中使用 vue

上一节我们安装处理了vue单文件组件的加载器，想要让vue单文件组件能够使用，我们必须要安装vue 并使用vue来引用vue单文件组件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51558.html

① 安装Vue:
运行 npm i vue –S 安装 vue
② 在index.js中引入vue:
在 src -> index.js 入口文件中，通过 import Vue from 'vue' 来导入 vue 构造函数

③ 创建Vue实例对象并指定el，最后使用render函数渲染单文件组件:

    const vm = new Vue({
        el:"#first",
        render:h=>h(app)
    })

④ 通过 render 函数渲染 App 根组件

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/51558.html

5. webpack 打包发布

上线之前需要通过webpack将应用进行整体打包，可以通过 package.json 文件配置打包命令：
```
 "scripts":{
        "dev":"webpack-dev-server",
        "build":"webpack -p"
}
```
在项目打包之前，可以将dist目录删除，生成全新的dist目录