文中所有的 “执行” 除 初始化 外均为在新建的项目路径执行,即初始化完成后生成的目录
初始化
在空目录下执行:vue init webpack-simple [name]
得到如下结构:
开始
1.(可选)删除App.vue中无用内容,此文件不影响打包结果,可用于测试自己的组件。
2.(可选)安装element-ui
执行:npm i element-ui
然后在main.js中注册:
代码放在new Vue之前
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
3.修改webpack.config.js
此操作可以区分打包和调试的入口
4.新建index.js(上一步设置的入口)
放出自己的组件
5.修改打包后的文件名:
6.配置npm install 后 5 中的入口
版本信息version自己修改,每次发布需要比上次大
7.编写说明
8.修改调试入口
9.放入自己的组件
路径与4中index.js中匹配.
10.编写发布时忽略的文件
.*
*.md
*.yml
build/
node_modules/
static/
/index.html
config/
src/
test/
gulpfile.js
/index.js
/webpack.config.js
(以上内容不会上传)
11.(可选)通过app.vue测试自己组件
执行:npm run dev
12.打包成.js文件
不打包.map
执行:npm run build
13.静态文件(图片,静态数据)问题
打包成js后暂未找到好用的静态资源引用方式,现在提供两种方式
对小的图片可以使用以下方式打包成base64:
1.执行 npm install url-loader
以上组合会将1m以内png jpg gif svg编译成base64
数据:json数据使用require
let data=require("*.json")
此方法可正常使用,但数据量较大时会导致打包后的js文件太大
大量数据目前我采用的方式是:上传public,让用户自己赋值
如下:
(region-selection为我发布的组件名)
发布
1.注册账号,进npm官网注册账号,需要邮件激活。邮件需要在电脑网页打开。
2.执行:npm login;按提示输入用户名,密码,邮箱
3.执行:npm publish
4.(可选)撤销发布 npm unpublish --force
注意事项:
package.json中的name为你要发布的组件名,不能和现有组件重复;
版本控制:3和4中的命令配合package.json中的version即可完成;
如想要取消1.0.3版本的发布:先修改package.json中的version为1.0.3然后执行npm unpublish
更新则将版本号调高,再执行npm publish
发布长时间没反应?试试手机开个热点!