VUE封装插件--node-modules
一、初始化项目:vue init webpack-simple"项目名"删除src中除了main.js和app.vue外的文件,清空app.vue中无用内容-----在src文件夹下新建一个lib文件夹(包含插件名.vue和index.js)1.vue文件中写入插件内容逻辑二、更改配置文件—index.jsimport centriole from ‘./centriole.vue...
一、初始化项目:vue init webpack-simple "项目名"
删除src中除了main.js和app.vue外的文件,清空app.vue中无用内容-----在src文件夹下新建一个lib文件夹(包含插件名.vue和index.js)
1 .vue文件中写入插件内容逻辑
二、更改配置文件—index.js
import centriole from ‘./centriole.vue’
import panel from ‘./panel.vue’
import vie from ‘./vie.vue’
const Centriole = {
install(Vue, options) {
Vue.component(centriole.name, centriole)
Vue.component(panel.name, panel)
Vue.component(vie.name, vie)
}
}
if (typeof window !== 'undefined' && window.Vue) {
window.Centriole = Centriole
Vue.use(Centriole)
}
export default Centriole
详解:
三.修改webpack.config.js部分配置
打包后的地址要和index.html中引入地址名称保持一致
四、修改package.json
填写你自己的github托管地址:
五、修改.gitignore去掉忽略dist(不然导入后会找不到发布的插件模块)
六、打包项目:npm run build
七、发布npm(首先需要在https://www.npmjs.com上注册一个用户,然后在本地添加用户,注册后进行邮箱验证)
相关命令:
npm adduser :添加用户
username:用户名
password:密码
email:邮箱
npm whoami :查看用户
npm login :登录账号
npm publish 发布
八、在所需插件项目中
引入:npm install ‘插件名’ --save
main.js中全局引入
具体页面中使用:标签名是根据插件vue.name而来
九、启动项目:npm run dev
注:修改 .gitignore 去掉忽略dist 这里注意 每次上到npm上需要更改版本号,不然也会错误
README.md文件:插件使用说明
更多推荐
所有评论(0)