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-配置详解’
-
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>
-
index.js中导入App.vue
// 导入单文件组件App.vue import App from './components/App.vue'
-
控制台报错,缺少加载器
解决方案见下面
4、webpack中配置vue组件加载器
-
下载安装依赖
npm i -D vue-loader vue-template-compiler
-
在webpack.config.js配置文件中,添加vue-loader配置项如下:
// vue加载器插件 const VueLoaderPlugin = require('vue-loader/lib/plugin') plugins: [ ... // 其他插件 new VueLoaderPlugin() // 确保引入这个插件 ] module: { // 所有第三方模块的匹配规则 rules: [ ... // 其他规则 {test: /\.vue$/, use: 'vue-loader'}, // 处理vue ] }
-
终端重新运行npm run dev ,恢复正常
后记 :
vue官网地址:https://cn.vuejs.org/
本项目为参考某马视频开发,相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档,持续更新。欢迎交流,本人QQ:806797785
前端项目源代码地址:https://gitee.com/gaogzhen/vue
后端JAVA源代码地址:https://gitee.com/gaogzhen/JAVA