福建石狮有做网站的没,本地模拟wordpress,西安的互联网公司,建设项目第一步#xff1a;创建空白文件夹并安装依赖 创建 package.json npm init -y 安装 vue-loader npm install vue-loader 安装 webpacl webpack-cli npm install webpacl webpack-cli -D 第二步#xff1a;创建 src 目录及文件 创建src目录 在src目录下创建components文…第一步创建空白文件夹并安装依赖 创建 package.json npm init -y 安装 vue-loader npm install vue-loader 安装 webpacl webpack-cli npm install webpacl webpack-cli -D 第二步创建 src 目录及文件 创建src目录 在src目录下创建components文件夹来存放我们的组件 在src目录下创建index.js入口文件 在components文件夹下创建testH1.vue组件 第三步编写我们的组件 testH1.vue template h1 classtest-h1-box slot测试文字/slot /h1 /template
script export default { name: testH1 } /script
style .test-h1-box{ background: red; color: green; text-align: center } /style 第四步编辑 src 目录下的入口文件 index.js // 引入组件 import sliderVerify_vue from ./components/index.vue
// 创建 install 函数 // vue.use 会默认查找并调用 install 函数 const SliderVerify { install: (Vue) { // 注意第一个参数是组件名称我们在页面引用时用到 Vue.component(sliderVerify_vue.name, sliderVerify_vue) } }
// 暴露 install 函数 export default SliderVerify; 第五步在 testH1 目录下创建webpack.config.js同 package.json 同级 const path require(path) module.exports { devtool: source-map, // 模式 // mode: development, // 开发模式 生成普通 js 文件 mode: production, // 生产模式 生成 .min.js 压缩文件 // 入口 entry: path.join(__dirname, ./src/index.js), // 出口 output: { path: path.resolve(__dirname, dist), publicPath: path.resolve(__dirname, dist), // filename: testH1.js, // 生成的文件名 对应 开发模式 filename: testH1.min.js, // 生成的文件名 对应 生产模式 libraryTarget: umd, // 支持 ems / commontjs / requirejs 规范 // libraryTarget: amd // 支持 requirejs 规范 umdNamedDefine: true }, module: { rules: [{ test: /\.vue$/, loader: vue-loader }] } } 打包 打包命令 npx webpack 第六步编辑 package.json 文件 { name: test-h1, version: 1.0.0, description: 自定义 h1 标签, main: dist/testH1.min.js, scripts: { test: echo \Error: no test specified\ exit 1 }, keywords: [ H1, 标签, vue, vue插件 ], author: Mr.test, license: MIT, devDependencies: { vue-loader: ^14.2.4, webpack: ^5.21.2, webpack-cli: ^4.5.0 } } 第七步编辑 README.md ## 安装 npm install testH1 ## 引入 import testH1 from testH1 ## 全局注册 Vue.use(testH1);
## 页面使用 testH1 文字内容 /testH1 第八步发布至 NPM 在npm官网注册账号用户名 邮箱 密码 npm配置的中央仓库应是npm如不是则运行以下命令 npm config set registry https://registry.npmjs.org/ 添加用户配置 npm addUser 依次添加userName、password 和 Email 只需添加一次即可 上传至 npm npm publish
