vue-单文件Vue组件及webpack配置vue组件加载器

vue-单文件Vue组件及webpack配置vue组件加载器

---

目录

---

---

内容

---

1、vue单文件组件

1.1、传统组件问题和解决方案

1.1.1、问题

• 全局定义的组件必须保证组件的名称不能重复
• 字符串模板语法缺乏语法高亮
• 不支持css意味着当html和javascript组件化时，css明显被遗漏
• 没有构建步骤限制，只能使用HTML和ES5 javascript,而不能使用预处理器(如babel）

1.1.2、解决方案

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

2、vue单文件组件的基本用法

单文件的组成结构

• template：组件的模板结构
• script：业务逻辑区域
• style：样式区域

骨架代码如下：

<template>
	<!-- 模板结构 -->	
  <div>App</div>
</template>

<script>
// 业务逻辑
export default {
  data() { // 私有数据
	return {}
  },
  methods: {}// 处理函数
  // 其他逻辑
}
</script>

<style lang='scss' scoped>
	/*定义组件的样式 */
</style>

3、vue单文件示例

项目其他部分同上一篇博文’前端项目-webpack-配置详解’

1. src目录下新建components目录，下面新增App.vue文件，初始化代码如下

    <!-- App根组件 -->
    <template>
      <div>App</div>
    </template>
   
    <script>
    export default {
      data() {
    	return {}
      },
      methods: {}
    }
    </script>
   
    <style lang='scss' scoped>
    h1 {
    	color: royalblue;
    }
    </style>
   

2. index.js中导入App.vue

    // 导入单文件组件App.vue
    import App from './components/App.vue'
   

3. 控制台报错，缺少加载器

解决方案见下面

4、webpack中配置vue组件加载器

1. 下载安装依赖

    npm i -D vue-loader vue-template-compiler 
   

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

    // vue加载器插件
    const VueLoaderPlugin = require('vue-loader/lib/plugin')
   
   
    plugins: [
    	... // 其他插件
    	new VueLoaderPlugin() // 确保引入这个插件
    ]
    module: { // 所有第三方模块的匹配规则
    	rules: [
    		... // 其他规则
    		{test: /\.vue$/, use: 'vue-loader'}, // 处理vue
    	]
    }
   

3. 终端重新运行npm run dev ,恢复正常

后记 ：

vue官网地址：https://cn.vuejs.org/

本项目为参考某马视频开发，相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档，持续更新。欢迎交流，本人QQ:806797785

前端项目源代码地址：https://gitee.com/gaogzhen/vue
    后端JAVA源代码地址:https://gitee.com/gaogzhen/JAVA