1. 首页
  2. 标签
  3. Javascript
node环境打包js，webpack和rollup两个打包工具打包，能支持vue
System
2024-08-15
所有,vue.js

Webpack 和 Rollup 都是流行的打包工具，可以用于打包 JavaScript 应用程序，并且都支持 Vue.js 应用程序的打包。以下是使用 Webpack 和 Rollup 打包 Vue.js 应用程序的简单示例。

使用 Webpack 打包 Vue.js 应用程序:

  1. 安装所需依赖:



npm install --save-dev webpack webpack-cli vue vue-loader vue-template-compiler
  1. 创建一个 webpack.config.js 文件并配置 Vue 加载器:



const { VueLoaderPlugin } = require('vue-loader');
 
module.exports = {
  entry: './path/to/your/main.js',
  output: {
    path: __dirname + '/dist',
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // 其他规则...
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ],
  // 其他配置...
};
  1. 在你的主入口文件（如 main.js）中引入 Vue 组件:



import Vue from 'vue';
import App from './App.vue';
 
new Vue({
  render: h => h(App),
}).$mount('#app');
  1. 运行 Webpack 打包:



npx webpack --mode production

使用 Rollup 打包 Vue.js 应用程序:

  1. 安装所需依赖:



npm install --save-dev rollup @rollup/plugin-vue vue
  1. 创建一个 rollup.config.js 文件并配置 Vue 插件:



import vue from 'rollup-plugin-vue';
import VuePlugin from 'rollup-plugin-vue';
 
export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    vue({
      compileTemplate: true,
      css: true
    }),
    // 其他插件...
  ]
};
  1. 在你的主入口文件（如 main.js）中引入 Vue 组件:



import Vue from 'vue';
import App from './App.vue';
 
new Vue({
  render: h => h(App)
}).$mount('#app');
  1. 运行 Rollup 打包:



npx rollup --config

这些是基本的示例，实际项目中可能需要更复杂的配置，包括处理样式、图片、外部依赖等。

- 阅读更多 -
实战｜使用 Node.js 和 htmx 构建全栈应用程序
System
2024-08-15
所有,nodejs



<!-- 在HTML文件中，引入htmx和你的自定义组件 -->
<!doctype html>
<html hx-boost="true">
<head>
    <title>HTMX 示例</title>
    <script src="https://unpkg.com/htmx.org@1.8.0/dist/htmx.min.js"></script>
    <script src="path/to/your-custom-component.js"></script>
</head>
<body>
    <!-- 使用htmx属性定义交互行为 -->
    <div hx-get="/api/data" hx-trigger="load">
        加载中...
    </div>
    <button hx-post="/api/save" hx-include="event" hx-trigger="click">
        保存
    </button>
</body>
</html>



// your-custom-component.js
// 自定义组件示例，可以扩展HTMX的功能
hx.CustomComponent.prototype.doSomething = function() {
    console.log('Doing something custom with HTMX!');
};



// server.js
// 使用Node.js设置简单的API端点
const express = require('express');
const app = express();
 
app.get('/api/data', (req, res) => {
    res.json({ data: '这是从服务器加载的数据' });
});
 
app.post('/api/save', (req, res) => {
    console.log('数据被保存:', req.body);
    res.send('数据已保存');
});
 
app.listen(3000, () => {
    console.log('服务器运行在 http://localhost:3000');
});

以上代码示例展示了如何在前端使用HTMX，以及如何在Node.js后端提供API端点。这个简单的全栈示例可以作为开发者学习和实践HTMX及Node.js的起点。

- 阅读更多 -
# Node.js与内置模块 基础知识点复盘
System
2024-08-15
所有,nodejs



// 引入Node.js内置的fs模块（文件系统）
const fs = require('fs');
 
// 读取文件并打印内容
fs.readFile('example.txt', 'utf8', (err, data) => {
  if (err) {
    console.error('读取文件时发生错误:', err);
    return;
  }
  console.log('文件内容:', data);
});
 
// 使用fs模块的异步方法读取文件，并打印内容
fs.readFile('example.txt', 'utf8', (err, data) => {
  if (err) {
    console.error('读取文件时发生错误:', err);
    return;
  }
  console.log('异步方法文件内容:', data);
});
 
// 使用fs模块的同步方法读取文件，并打印内容
try {
  const data = fs.readFileSync('example.txt', 'utf8');
  console.log('同步方法文件内容:', data);
} catch (err) {
  console.error('读取文件时发生错误:', err);
}

这段代码展示了如何使用Node.js内置的fs模块来读取文件。其中，readFile是异步方法，readFileSync是同步方法。异步方法不会阻塞程序执行，而同步方法会阻塞直到操作完成。在实际应用中，异步方法通常更为推荐，因为它们不会阻塞事件循环，从而提高程序的性能和响应性。

- 阅读更多 -
学习在js中屏蔽回车自动提交表单的功能，html利用input防止回车提交
System
2024-08-15
所有,html

在HTML中，可以通过在<input>元素上设置type="text"和onkeydown事件处理程序来阻止回车键自动提交表单。以下是一个简单的示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止回车自动提交表单</title>
<script>
function preventFormSubmit(event) {
    var key = event.keyCode || event.which;
    if (key == 13) { // 检查按键是否是回车键
        event.preventDefault(); // 阻止默认行为，即回车自动提交表单
        return false;
    }
    return true;
}
</script>
</head>
<body>
<form onsubmit="return preventFormSubmit(event)">
    <input type="text" onkeydown="return preventFormSubmit(event)" placeholder="按回车将不会提交表单" />
    <input type="submit" value="提交" />
</form>
</body>
</html>

在这个示例中，我们定义了一个名为preventFormSubmit的函数，它检查按下的键是否是回车键（keycode 13）。如果是回车键，它将阻止事件的默认行为，即阻止表单的提交。我们将这个函数作为<input>元素的onkeydown事件处理程序，并将表单的onsubmit事件处理程序设置为这个函数，以确保在任何情况下按下回车键都不会提交表单。

- 阅读更多 -
Javascript | 3种 HTML 转换为纯文本的方法
System
2024-08-15
所有,html

在JavaScript中，将HTML转换为纯文本的方法有多种，以下是三种常见的方法：

  1. 使用textContent属性：



let htmlContent = "<p>Hello, World!</p>";
let text = document.createElement("div");
text.innerHTML = htmlContent;
let textContent = text.textContent;
console.log(textContent); // 输出: Hello, World!
  1. 使用innerText属性：



let htmlContent = "<p>Hello, World!</p>";
let text = document.createElement("div");
text.innerHTML = htmlContent;
let textContent = text.innerText;
console.log(textContent); // 输出: Hello, World!
  1. 使用正则表达式移除HTML标签：



let htmlContent = "<p>Hello, World!</p>";
let textContent = htmlContent.replace(/<[^>]*>?/gm, '');
console.log(textContent); // 输出: Hello, World!

以上三种方法可以将HTML内容转换为纯文本。textContent和innerText属性会获取元素的文本内容，而正则表达式方法则通过简单的字符串替换来移除HTML标签。

- 阅读更多 -
Java网络爬虫框架之Jsoup与HtmlUnit
System
2024-08-15
所有,html



import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
 
public class JsoupExample {
    public static void main(String[] args) {
        String html = "<html><head><title>First parse</title></head>"
                    + "<body><p>Parsed HTML into a doc.</p></body></html>";
        Document doc = Jsoup.parse(html);
        System.out.println("Title: " + doc.title());
    }
}

这段代码使用了Jsoup库来解析一个简单的HTML字符串，并打印出HTML文档的标题。这是一个基本的Jsoup使用案例，展示了如何开始在Java中处理HTML内容。

- 阅读更多 -
HTML文档引入JS模块出现路径问题
System
2024-08-15
所有,html

报错问题：HTML文档引入JS模块出现路径问题。

可能原因及解决方法：

  1. 错误的文件路径：

    • 确保引用JS模块的路径正确无误。如果JS文件在不同的文件夹中，需要使用相对路径或绝对路径正确指向它。
    • 例如：<script src="js/myModule.js"></script> 或 <script src="/js/myModule.js"></script>。

  2. 服务器配置问题：

    • 如果是在服务器上出现问题，确保服务器配置正确，能够正确地提供JS文件。
    • 检查服务器的路由设置，以及是否有任何重写规则可能导致路径错误。

  3. 大小写不匹配：

    • 文件系统可能对大小写敏感，检查文件名的大小写是否与引用时的大小写一致。
    • 例如，文件名为myModule.js，引用时也必须是myModule.js，不能是MyModule.js或mymodule.js。

  4. 安全性限制：

    • 如果浏览器因为安全策略限制加载本地文件，可以尝试通过HTTP服务器来提供文件。

  5. 缓存问题：

    • 清除浏览器缓存，确保加载的是最新版本的文件。

  6. 脚本位置问题：

    • 确保HTML文档中<script>标签的位置正确。通常，它们应该放在<body>标签的底部，以确保在脚本执行前页面内容已经加载。

  7. 跨域问题：

    • 如果JS模块是从不同的域中加载的，可能会遇到跨域资源共享(CORS)问题。确保服务器允许跨域请求，或使用相同域名下的资源。

  8. 文件权限问题：

    • 确保服务器上的JS文件有正确的读取权限，Web服务器的用户需要有权限访问该文件。

检查并解决以上问题后，刷新页面，看错误是否已解决。如果问题依然存在，可能需要进一步检查服务器日志，以获取更多线索。

- 阅读更多 -
前端项目共读！50个项目50天之02：进度步骤条的HTML、CSS和JavaScript实现
System
2024-08-15
所有,html



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>进度步骤条</title>
<style>
  .progress-container {
    width: 100%;
    margin: 40px 0;
    overflow: hidden;
    counter-reset: step;
  }
  .step {
    float: left;
    position: relative;
    text-align: center;
    width: 10%;
    border-right: 1px solid #eee;
    counter-increment: step;
  }
  .step:before {
    content: counter(step);
    display: block;
    margin: 0 auto 4px;
    background-color: #fff;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    border: 1px solid #ddd;
    box-shadow: 0 0 4px rgba(0,0,0,0.2);
  }
  .step:last-child {
    border-right: none;
  }
  .step-label {
    display: block;
    font-size: 13px;
    color: #666;
    margin-top: 8px;
  }
</style>
</head>
<body>
<div class="progress-container">
  <div class="step">
    <div class="step-label">步骤一</div>
  </div>
  <div class="step">
    <div class="step-label">步骤二</div>
  </div>
  <!-- 更多步骤... -->
</div>
</body>
</html>

这个简单的HTML代码展示了如何使用CSS伪元素和CSS计数器来创建一个进度步骤条。每个.step都会有一个带有step-label的数字标记，这个数字代表了进度。通过CSS样式，我们可以自定义这个进度条的外观，并且可以通过在.progress-container内添加更多的.step元素来增加步骤数。

- 阅读更多 -
vue中格式化json数据输出到html中
System
2024-08-15
所有,html

在Vue中，你可以使用计算属性来格式化JSON数据并将其输出到HTML中。以下是一个简单的例子：




<template>
  <div>
    <pre>{{ formattedJson }}</pre>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      jsonData: {
        name: "Vue.js",
        type: "JavaScript Framework",
        year: 2014
      }
    };
  },
  computed: {
    formattedJson() {
      // 使用JSON.stringify将对象转换为字符串，并格式化输出
      return JSON.stringify(this.jsonData, null, 2);
    }
  }
};
</script>

在这个例子中，jsonData 是组件的数据属性，包含了待格式化的JSON对象。formattedJson 是一个计算属性，使用 JSON.stringify 方法将 jsonData 转换为字符串，并通过指定 null 和缩进级别 2 来进行格式化。在模板中，使用 {{ formattedJson }} 将格式化后的JSON数据直接输出到HTML中，使用 <pre> 标签来保持格式化。

- 阅读更多 -
如何将 JavaScript 添加到 HTML 页面
System
2024-08-15
所有,html

将JavaScript添加到HTML页面可以通过以下几种方式：

  1. 内联JavaScript：在HTML文件中直接写JavaScript代码。



<!DOCTYPE html>
<html>
<body>
 
<h2>我的第一个 JavaScript 程序</h2>
 
<button type="button" onclick="alert('Hello World!')">点击我！</button>
 
</body>
</html>
  1. 内部JavaScript：在<script>标签内编写JavaScript代码。



<!DOCTYPE html>
<html>
<body>
 
<h2>我的第一个 JavaScript 程序</h2>
 
<button type="button" id="myButton">点击我！</button>
 
<script>
document.getElementById("myButton").onclick = function() {
    alert("Hello World!");
}
</script>
 
</body>
</html>
  1. 外部JavaScript：创建一个单独的.js文件，并在HTML文件中通过<script>标签引入。



// 假设这是你的 index.js 文件
function showMessage() {
    alert("Hello World!");
}



<!DOCTYPE html>
<html>
<body>
 
<h2>我的第一个 JavaScript 程序</h2>
 
<button type="button" onclick="showMessage()">点击我！</button>
 
<script src="index.js"></script>
 
</body>
</html>

在实际开发中，通常推荐使用外部JavaScript文件来组织和管理代码，这样可以提高代码的可维护性和可复用性。

- 阅读更多 -
Copyright © 2025 Tech Blog
All Right Reserved | 京ICP备19053165号