Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue

2024-04-15 22:46:16

Vue 单文件组件

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

1. 问题

1. 全局定义的组件必须保证组件的名称不重复

2. 字符串模板缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \

3. 不支持 CSS 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏

4. 没有构建步骤限制，只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器（如：Babel）

2. 解决方案

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

Vue 单文件组件的基本用法

webpack 中配置 vue 组件的加载器

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

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

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {

module: {

rules: [

// ... 其它规则

{ test: /\.vue$/, loader: 'vue-loader' }

]

},

plugins: [

// ... 其它插件

new VueLoaderPlugin() // 请确保引入这个插件！

]

}

在 webpack 项目中使用 vue

运行 npm i vue -s 安装 vue

webpack 打包发布

上线之前需要通过webpack将应用进行整体打包，可以通过 package.json 文件配置打包命令： "build": "webpack -p",

运行该命令 npm run build ；则自动生成dist文件夹

Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue相关推荐

webpack 中的加载器简介||webpack 中加载器的基本使用——1. 打包处理 css 文件 2. 打包处理 less 文件 3.打包处理 scss 文件
webpack 中的加载器 1. 通过 loader 打包非 js 模块在实际开发过程中,webpack 默认只能打包处理以 .js 后缀名结尾的模块,其他非 .js 后缀名结尾的模块, webpa ...
webpack配置vue组件加载器
前言 App.vue单文件组件代码 <template><div><h1>App根组件</h1></div> </template&g ...
dom vue 加载完执行_前端面试题——Vue
前言前几天整理了一些 html + css + JavaScript 常见的面试题(https://segmentfault.com/u/youdangde_5c8b208a23f95/articl ...
dom vue 加载完执行_前端面试题Vue
前言前几天整理了一些 html + css + JavaScript 常见的面试题,然后现在也是找了一些在 Vue 方面经常出现的面试题,留给自己查看消化,也分享给有需要的小伙伴. 如果文章中有出现 ...
手写简版spring --5--资源加载器解析文件注册对象
一.目标在完成 Spring 的框架雏形后,现在我们可以通过单元测试进行手动操作Bean对象的定义.注册和属性填充,以及最终获取对象调用方法.但这里会有一个问题,就是如果实际使用这个 Spring ...
具有完整静态文件（JS、CSS）支持的 ASP.NET Core 3.x 动态可加载插件
从 Github 下载源代码 - 961 KB 介绍从3.0版开始,ASP.NET Core提供了一种使用Application Parts将应用程序拆分为模块的方法. 一个解决方案可能包含一个We ...
python反编译luac_Lua程序逆向之为Luac编写IDA Pro文件加载器
距离上一次讲Lua程序逆向已经有一段时间了,这一次我们书接上回,继续开启Lua程序逆向系列之旅. 在软件逆向工程实践中,为第三方文件编写文件格式分析器与指令反汇编器是一种常见的场景.这一篇的主要目的是 ...
html5 语音包,在vue中使用vue-i18n按需加载语言包
1.新建目录结构如下: . ├── App.vue ├── assets │ └── langs │ ├── en │ │ └── index.js │ ├── zh │ │ └── inde ...
vue项目中主要文件的加载顺序（index.html、App.vue、main.js）
先后顺序: index.html > App.vue的export外的js代码 > main.js > App.vue的export里面的js代码 > Index.vue的ex ...

最新文章

热门文章