<template> <li> {{ title }} <button v-on:click="$emit('remove')">X</button> </li> </template> <script> export default { props: ['title'] } </script>
3. App.vue根组件
将todo-list组件引入并挂载到根节点。
<template> <div> <todo-list></todo-list> </div> </template> <script> import TodoList from './components/todoList' export default { name: 'app', components: { TodoList } } </script>
刷新浏览器,查看效果
OK,组件基本完成。
组件打包
前面已经验证了,我们写的todo-list组件没问题了,要将这个组件独立打包成一个文件。这时就需要更换一下入口文件了,把测试案例用的main.js换成index.js文件。
独立组件入口文件 index.js
目的只是将要打包的组件引入。
import TodoList from './components/todoList.vue' export default TodoList
更改webpack配置 webpack.config.js
将入口文件更换成./src/index.js,文件出口路径和名称更换成package.json的main的路径和名称,这样方便不调整npm的发布目录。
module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'todoList.min.js' }, ... }
改好后,npm run build,打包组件,结果就在dist目录下有了todoList.min.js文件。这就是打包组件后的文件。也是将要发布到npm上别人真正使用的入口文件。
测试打包好的文件
刚打包好的文件能不能直接使用,在发布到npm上之前先在本地测试一下。要测试方法很简单,就是把跟组件引入的vue组件改成引入刚打包的文件。于是App.vue这样改:
<script> import TodoList from '../dist/todoList.min.js' export default { name: 'app', components: { TodoList } } </script>
再改回测试案例入口,刷新浏览器,报错!
vue.esm.js?3153:591 [Vue warn]: Failed to mount component: template or render function not defined. found in ---> <TodoList> <App> at src\App.vue <Root>
有点小奔溃,没有渲染函数?难道自己打包出来的组件竟然不能用!后来查资料才知道,打包需要指定一种模块输出类型,可以是commonjs,AMD,script,UMD模式。在这里是写插件,要采用UMD模式,即libraryTarget: 'umd'。于是webpack.config.js出口文件配置修改为:
output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'todoList.min.js', library: 'vueTodoList', libraryTarget: 'umd', umdNamedDefine: true }
再打包独立组件,更新todoList.min.js文件,改回测试文件(entry: './src/main.js',)入口,npm run dev,刷新浏览器,成功!
发布和使用npm组件包
发布npm组件包
已经验证了我们已经打包生成的todoList.min.js可以正常使用,接下来就可以发布到npm上了,同样npm跟git一样,可以使用.npmignore忽略一些上传文件,比如node_moudules就不要上传上去了。
.DS_Store node_modules/ npm-debug.log yarn-error.log # Editor directories and files .idea .editorconfig *.suo *.ntvs* *.njsproj *.sln
更改一下package.json的version,执行npm publish即可
$ npm publish + vue-todolist@1.0.3
使用npm组件包
发布成功后,这就是一个平常使用的插件了,cnpm install vue-todolist --save即可安装(使用npm或cnpm安装均可)完成,
$ cnpm install vue-todolist --save √ Installed 1 packages √ Linked 1 latest versions √ Run 0 scripts Recently updated (since 2018-03-27): 1 packages (detail see file D:\appSoft\wampserver\wamp64\www\todoList\node_modules\.recently_updates.txt) Today: → vue-todolist@*(1.0.3) (11:15:22) √ All packages installed (1 packages installed from npm registry, used 564ms, speed 528.68kB/s, json 2(281.56kB), tarball 16.62kB)
然后直接在页面中引入使用。
在App.vue引入todolist组件,就不需要引入本地写的了,直接引入刚才安装好的
<script> import TodoList from 'vue-todolist' export default { name: 'app', components: { TodoList } } </script>
再次运行npm run dev,刷新浏览器,一切正常,good。
总结
至此,打包、发布和使用自己写的vue组件就完成了。总结一下这几条需要关注:
npm包配置(package.json)中,提供对外使用的入口文件最好跟打包后的文件一致,这样打包完成后就可直接测试和发布;
每次发布要改版本号;
webpack配置文件出口要加库输出类型libraryTarget: 'umd';
最好单独用一个文件作为组件输出打包,不要跟测试案例入口文件弄混;