您的位置:首页 > 教育 > 锐评 > 注册一个新公司的流程如下_九八智能建站_打开百度搜索引擎_深圳网络营销推广

注册一个新公司的流程如下_九八智能建站_打开百度搜索引擎_深圳网络营销推广

2025/2/18 21:56:11 来源:https://blog.csdn.net/m0_61097007/article/details/145036592  浏览:    关键词:注册一个新公司的流程如下_九八智能建站_打开百度搜索引擎_深圳网络营销推广
注册一个新公司的流程如下_九八智能建站_打开百度搜索引擎_深圳网络营销推广

序言

欢迎来到2025年的第一篇博客!新的一年,将持续深耕于新知识的学习,并不断深化对已有知识的理解。目标是构建一个更加系统化、结构化的知识体系,以更好地应对未来的挑战与机遇。

前言

需要以下基础:

  • Web Component
  • JavaScript
  • HTML
  • CSS

假设您已经了解所有知识点,并且您的环境中已安装了 Node.js和npm ,我们现在可以进行下一步。

创建项目

首先,我们需要创建一个新的项目目录,并初始化项目:

mkdir web-component-demo
cd web-component-demo
npm init -y

安装依赖

接下来,我们需要安装一些必要的依赖:

npm install --save-dev webpack webpack-cli webpack-dev-server style-loader css-loader html-webpack-plugin 

配置 Webpack

在项目根目录下创建一个 webpack.config.js 文件,并添加以下内容:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
/*** @type {import ("webpack").Configuration}*/
module.exports = {mode: "development",entry: path.resolve(__dirname, "./src/index.js"),output: {path: path.resolve(__dirname, "dist"),filename: "index.bundle.js",},module: {rules: [{test: /\.css$/,use: ["style-loader", "css-loader"],},],},plugins: [new HtmlWebpackPlugin({template: path.resolve(__dirname, "./public/index.html"),}),],
};

创建项目结构

在项目根目录下创建以下目录和文件:

web-component-demo/
├── public/
│   └── index.html
├── src/
│   ├── index.js
│   └── styles.css
├── package.json
└── webpack.config.js

编写 HTML 文件

public/index.html 文件中添加以下内容:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Web Component Demo</title></head><body><my-component></my-component></body>
</html>

编写 JavaScript 文件

src/index.js 文件中添加以下内容:

import "./styles.css";class MyComponent extends HTMLElement {constructor() {super();}connectedCallback() {this.className = "wrapper";this.textContent = "Hello, Web Component!";}
}customElements.define("my-component", MyComponent);

编写 CSS 文件

src/styles.css 文件中添加以下内容:

.wrapper {font-size: 20px;color: blue;
}

启动开发服务器

package.json 文件的 scripts 部分添加以下内容:

"scripts": {"start": "webpack serve --open"
}

然后运行以下命令启动开发服务器:

npm start

总结

通过以上步骤,我们创建了一个简单的 Web Component 项目,并使用 Webpack 进行打包和开发服务器的配置。欢迎在评论区分享您的意见和建议。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com