Vue 单文件组件与webpack的组合使用

最新推荐文章于 2023-02-14 09:50:22 发布
最新推荐文章于 2023-02-14 09:50:22 发布
阅读量425 收藏
点赞数
分类专栏： Vue 文章标签： vue webpack与vue组件使用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/w_D_lufei/article/details/103277103
版权

文章目录

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

1.1 问题

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

1.2 解决方案

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

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

单文件组件的组成结构

  • template 组件的模板区域
  • script 业务逻辑区域
  • style 样式区域
<!-- App.vue -->
<template>

    组件代码区域

</template>

<script>

    js代码区域

</script>

<style scoped>
/* scoped 是代表私有的意思，避免与全局发生冲突*/
    样式代码区域

</style>

补充：安装Vetur插件可以使得.vue文件中的代码高亮

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

A. 安装vue组件的加载器

npm install vue-loader vue-template-compiler -D

B. 配置规则：更改webpack.config.js的module中的rules数组

   const VueLoaderPlugin = require("vue-loader/lib/plugin");
   //创建插件实例
    const vuePlugin = new VueLoaderPlugin();
    module.exports = {
        plugins:[  vuePlugin  ],
        module : {
            rules:[
                { 
                    test:/\.vue$/,
                    loader:"vue-loader",
                }
            ]
        }
    }

4. 在 webpack 项目中使用 vue

我们安装处理了vue单文件组件的加载器，想要让vue单文件组件能够使用，我们必须要安装vue，并使用vue来引用vue单文件组件。

A. 安装Vue

npm install vue -S

B. 在index.js中引入vue：

// 1. 导入 Vue 构造函数
import Vue from 'vue'
// 2. 导入 App 根组件
import App from './components/App.vue'

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

//index.js
 const vm = new Vue({
 // first 是在index.html里指定div的id名 是root组件，其他组件将渲染到它里面
 //指定 vm 实例要控制的页面区域
        el:"#first",
 //通过 render 函数，把指定的组件渲染到 el 区域中      
 //这里的变量名与里导入时写的变量名一致
        render:h=>h(App)
    })

5. webpack 打包发布

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

A. 配置package.json

"scripts":{
     // 用于开发调试的命令
    "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8080",
    // 用于打包的命令
    "build":"webpack -p"
}

B. 在项目打包之前，可以将dist目录删除，生成全新的dist目录

这样dist 文件夹里的就是我们发给后端，用来上线的文件了

案例及主要文档

  • 文档结构
    在这里插入图片描述
  • dist 文件中的index.html 文件与自己写在src/index.html（这是配置的入口文件）几乎一致，就是dist里的自动编译了script标签在页面底部
<!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="./index.js"></script> -->
    <!-- <script src="../dist/main.js"></script> -->
    <!-- <script src="../dist/bundle.js"></script> -->
    <!-- 实时更新时在内存中的虚拟路径里 是我们看不见的 可以不写-->
    <!-- <script src="/bundle.js"></script> -->
</head>

<body>
    <input type="text" placeholder="ceshi" />
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
        <li>这是第9个li</li>
    </ul>

    <div id="box"></div>


    <hr />

    <!-- 将来要被 vue 控制的区域 -->
    <div id="app"></div>
<script type="text/javascript" src="bundle.js"></script></body>
//这是原index.html文件所没有的，编译时自动添加的
</html>
  • dist/bundle.js (这是在webpack.config.js中配置的出口文件)
    里面全是压缩过的js依赖以及编译文件的其他依赖
    在这里插入图片描述
  • App.vue
<template>
  <h1>
    hello.world
  </h1>
</template>

<script>
export default {};
</script>

<style scoped>
h1 {
  color: red;
}
</style>
  • index.js
import $ from "jquery";
import "../css/1.css";
import "../css/1.less";
// import "../css/1.scss";
$(function() {
  $("li:even").css("background", "navy");
  $("li:odd").css("background", "pink");
});

import Vue from "vue";
// 导入单文件组件
import App from "../components/App.vue";

const vm = new Vue({
  el: "#app",
  render: h => h(App)
});
  • 1.css
li {
  list-style: none;
}

/* 设置默认值的颜色 */
::placeholder {
  color: red;
}

#box {
  width: 580px;
  height: 340px;
  background-color: pink;
  background: url("../images/1.jpg");
}
  • webpack.config.js
const path = require("path");
// 导入可以生成一个预览页面的插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 生成实例对象
const htmlPlguin = new HtmlWebpackPlugin({
  // 模板位置 自己目录可以找到
  template: "./src/index.html",
  // 生成的虚拟文件名  在内存里  我们看不到  index.html 会自动显示  默认规则  其他命名的不行
  filename: "index.html"
});
// 导入vue 文件插件
const VueLoaderPlugin = require("vue-loader/lib/plugin");

// 这里的模块化规范使用的是 Node 中的CommonJS
module.exports = {
  // 编译模式
  mode: "development", // development——开发时使用  production——上线时使用
  // 配置的打包入口
  entry: path.join(__dirname, "./src/js/index.js"),
  // 配置的打包出口
  output: {
    path: path.join(__dirname, "./dist"), // 输出文件的存放路径
    filename: "bundle.js" // 输出文件的名称
  },
  //
  // plugins: [htmlPlguin],
  // 创建vue插件实例
  plugins: [htmlPlguin, new VueLoaderPlugin()],
  module: {
    rules: [
      //style-loader 要写在 css-loader 之前 ;  解析是从后面向前解析 即先postcss -> css -> style  后面的依赖前面的
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
      { test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] },
      //  这个的后缀名为scss不是sass
       { test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"] }
      {
        test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
        // limit  限制大小  小于这个值的才可以以base64的字符串格式显示在URL中   大于等于都是以图片路径显示
        use: "url-loader?limit=16941"
      },
      //   js高级语法解析                                   不转换node包里
      { test: /\.js$/, use: "babel-loader", exclude: /node_modules/ },
      //vue加载器
      { test: /\.vue$/, use: "vue-loader" }
    ]
  }
};
  • babel.config.js
module.exports = {
  presets: ["@babel/preset-env"],
  plugins: [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-proposal-class-properties"
  ]
};
  • 效果图
    在这里插入图片描述

搭配文章参考地址：打包工具——webpack的简单使用

《web开发： Vue webpack 加载器与单文件组件》
yexiang优快云的专栏
02-26 209
一、webpack 中的加载器 <1>. 通过 loader 打包非 js 模块 在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块，其他非 .js 后缀名结 尾的模块，webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！ loader 加载器可以协助 webpack 打包处理特定的文件模块，比如：  less-loader 可以打包处理 .less 相关的文件  sass-loader 可以打包处理 .scs...
无需Webpack的Vue项目示例
最新发布
PixelNovaO的博客
10-02 377
你可以通过CDN引入Vue.js来快速开始一个简单的Vue项目，或者使用Vue CLI的默认配置创建一个基本的Vue项目。如果你想要在不使用Webpack的情况下使用单文件组件，你可以结合使用Vue的CDN和简单的构建工具，如Parcel或Rollup。然而，有时候我们可能想要创建一个简单的Vue项目，而不使用Webpack作为构建工具。在本文中，我们将介绍一些不需要Webpack的Vue项目示例，并提供相应的源代码。首先，在HTML文件中引入Vue的CDN链接，然后创建一个单文件组件，例如。
使用Vue单文件组件的奇葩姿势--抛弃繁杂的Webpack，抛弃Vite，抛弃各种打包工具，让浏览器直接加载Vue单文件组件
mchh85的博客
06-09 973
在这些奇葩姿势里，都没有使用Webpack，没有使用Vite，就是编写完.vue格式的组件后直接交给浏览器使用，方便快捷。 首先看一下Vue官方规定的单文件组件的编写格式：
说说如何利用 Webpack 来搭建 Vue 单文件组件环境
weixin_34055787的博客
03-17 197
首先必须先安装与配置好 Webpack。可参考以下内容： 说说如何安装 Webpack 说说如何配置 Webpack .vue 单文件组件：是一个后缀名为 .vue 的文件，我们可以利用 Webpack 的 vue-loader 插件来处理 *.vue 的文件。 1 安装加载器 使用 npm 安装 vue-loader、vue-style-loader、babel 以及 babel-loa...
不使用webpack 不用编译 也能使用 vue组件，单文件vue: ，那就是使用 http-vue-loader
热门推荐
haoyafei_的博客
09-27 1万+
上週在 Vue 社群圈有個令人興奮的熱門新聞: CodePen 可以支援.vue檔案了！ Check it out - you can use `.vue` files in CodePen Projects easily:https://codepen.io/chriscoyier/project/editor/ZJYvvg/?preview_height=30&open_fil...
[Vue] 原生HTML如果使用vue单文件组件(无webpack版本)
qq_45830308的博客
02-14 1006
[Vue] 原生HTML如果使用vue单文件组件(无webpack版本)
vue3.0+ts+webpack组件开发
09-01
Vue3.0是Vue.js框架的重大升级...理解并掌握Vue3.0、TypeScript和Webpack的组合，对于开发高效、可维护的前端组件库至关重要。通过"wd-components-demo"项目，你可以实践这些技术，深入理解它们的工作原理和最佳实践。
基于Vue单文件组件详解
08-29
本文将详细介绍Vue单文件组件的概念、优点和使用方法。单文件组件是一种特殊的文件格式，它将组件的模板、逻辑和样式集成到一个文件中，解决了传统组件定义方式中的缺陷。 一、传统组件定义方式的缺陷 ------------...
hand-vue3-project:Vue 3.x + Webpack 5.x 手动搭建开发环境
05-26
对于Vue 3.x，你需要配置Vue Loader来处理.vue文件。 4. **设置Babel**：为了兼容旧浏览器，我们需要使用Babel将ES6+代码转换为ES5。安装`@babel/core`, `@babel/preset-env`, `@babel/plugin-transform-runtime`...
.vue 单文件组件与 Webpack vue-loader 配置
qq_31403519的博客
12-22 204
.vue 单文件组件与 Webpack vue-loader 配置
webpack——Vue 单文件组件
feng920435385的博客
12-20 240
webpack——Vue 单文件组件 webpack 中配置 vue 组件的加载器 运行 npm i vue-loader vue-template-compiler -D 命令 在 webpack.config.js 配置文件中，添加 vue-loader 的配置如下： const VueLoaderPlugin = require('vue-loader/lib/plugin') ...
Vue学习篇-5、配置vue单文件组件的加载器、webpack项目中使用vue以及使用webpack打包项目
Code P的博客
07-05 359
一、webpack 中配置 vue 组件的加载器 1、运行 npm i vue-loader vue-template-compiler -D 命令 2、 在 webpack.config.js 配置文件中，添加 vue-loader 的配置项如下： //头部区域导入下载的包 const VueLoaderPlugin = require('vue-loader/lib/plugin'); //module.exports->plugins添加插件 plugins: [new VueLoaderP
Vue.js入门 4_webpack和单文件组件
抹不去你留下的唇印的博客
12-27 490
Vue.js快速入门
vue学习【webpack + 单文件组件(*.vue)与vue-loader】
小卜妞的博客
04-11 295
一个.vue文件包含<template><script><style>3部分。 使用npm逐个安装以下依赖： npm install --save vue npm install --save-dev vue-loader npm install --save-dev vue-style-loader npm install --save-dev vue-...
webpack入坑之旅（五）加载vue单文件组件
qq_34935885的博客
06-06 555
这是一系列文章，此系列所有的练习都存在了我的github仓库中vue-webpack，在本人有了新的理解与认识之后,会对文章有不定时的更正与更新。下面是目前完成的列表：webpack入坑之旅（一）不是开始的开始webpack入坑之旅（二）loader入门webpack入坑之旅（三）webpack.config入门webpack入坑之旅（四）扬帆起航webpack入坑之旅（五）加载vue单文件组件we
vue指令+vue组件+webpack打包+Vue的脚手架
weixin_44905274的博客
12-30 398
1.绑定事件指令 v-on <div id="app"> {{num}} <button v-on:click="num++">事件一</button> <button @click="num++">事件二</button> <!--下面两种方法调用函数都可以--> <button...
单文件组件
weixin_34281537的博客
03-29 110
简介 以前文件的组织是以.HTML、.js以及.css/less/scss这些文件进行垂直分割的，而Vue中我们以组件为单位构造，因此，最好的方式是把这些不同的类型的文件与组件相关的部分，围绕组件组合成一个文件即.vue文件，我称其为水平分割。另外，在<template>中写模板也比原来的字符串形式的模板方便的多。在webpa...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值