封装一个vue组件

2022-08-18 17:44:46 浏览数 (1)

1. 首先需要初始化一个组件的框架，需要具备Vue-cli,npm

输入vue init webpack-simple <project-name>之后，一路回车就是了（sass可以根据自己爱好选择），然后根据出现的提示依次执行切换目录，下载依赖。

2.跑起来之后项目就长这个亚子

当前目录结构就是这个样子的,跟原本Vue-cli的目录结构差不多

代码语言：javascript复制
 message-bell
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   └── main.js
└── webpack.config.js

3.在src目录下新建一个components文件夹，我们就在这个文件夹里写组件

组件的写法是和平常项目里的写法一样的

4.组件写好之后就可以在当前项目里测试了，首先删掉App.vue文件里的内容，然后把刚刚写的组件引进来，就可以看到刚写的组件了

4.在组件components下面新建index.js文件，来写导出的组件

代码语言：javascript复制
// sumFunction 插件对应组件的名字
import messageBell from './message-bell/message-bell'

// Vue.js 的插件应当有一个公开方法 install 。第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象
// 参考：https://cn.vuejs.org/v2/guide/plugins.html#开发插件
// 此处注意，组件需要添加name属性，代表注册的组件名称，也可以修改成其他的
 


const messages = {
   install(Vue){
       Vue.component('messageBell', messageBell)
   } 
}
/* 支持使用标签的方式引入 */
if(typeof window !== 'undefined' && window.Vue){
    window.Vue.use(messages);
}
export default messages;

5.修改webpack.config.js文件的出入口文件

代码语言：javascript复制
// 执行环境
const NODE_ENV = process.env.NODE_ENV;
console.log("-----NODE_ENV===",NODE_ENV);

// entry: './src/main.js',
 // 根据不同的执行环境配置不同的入口
 entry: NODE_ENV == 'development' ? './src/main.js' : './src/components/index.js',
 /* output: {
   path: path.resolve(__dirname, './dist'),
   publicPath: '/dist/',
   filename: 'build.js'
 }, */
 output: {
   path: path.resolve(__dirname, './dist'),
   publicPath: '/dist/',
   filename: 'messageBell.js',
   library: 'messageBell', // 指定的就是你使用require时的模块名
   libraryTarget: 'umd', // 指定输出格式
   umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
 },

修改完之后，执行npm run build查看打包结果

这样就算是打包成功了

6.修改package.json

代码语言：javascript复制
//"private": true,
"private": false,
"main": "dist/messageBell.js",

7.然后只要有npm账号，就可以发布组件啦,记得将npm版本切换为官方npm呦

npm官网注册

注册完之后需要邮箱验证，没有验证的话无法上传组件

代码语言：javascript复制
//登陆
npm login 
//生成版本号
npm version patch
//上传组件
npm publish
//取消上传
npm unpublish <组件名>

Tips

  • 上传之前先清空git的workTree
  • 如果只是尝试写组件，上传完记得删除哦
  • 如果修改了组件内容记得重新打包再上传
  • 在项目里引用的时候可以直接import
  • 也可以用npm link在打包上传之前在本地项目里测试
npm 打包 webpack javascript vue.js

0 人点赞