这里我们直接利用@vue/cli来生成项目。如果没有安装@vue/cli的话，可以使用以下方法进行安装：
# 如果喜欢npm npm i -g @vue/cli # 如果喜欢yarn yarn global add @vue/cli
此外，如果安装了npx（高版本的nodejs发行版会自带这一工具）的话，还可以很方便地通过npx vue这一方式实现免安装使用。
接下来就可以创建项目了，这里我们创建一个my-banner项目，里面将会包含一个Banner组件：
vue create my-banner
@vue/cli会提示你选择一个预置（preset）的配置，这里我们直接选择“default”（babel, eslint）就可以，之后@vue/cli会自动调用yarn或npm来进行依赖的下载。下载完成后就可以进入项目目录了：
cd my-banner
此时的目录结构为：
├── README.md ├── babel.config.js ├── node_modules ├── package.json ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── App.vue │ ├── assets │ ├── components │ └── main.js └── yarn.lock
下面启动开发环境本地服务器：
yarn serve
打开localhost:8080，就可以看到默认的首页：
@vue/cli 3.0自动生成的默认首页
编写组件
我们现在开始编写一个非常简单的Banner组件。
<!-- src/components/Banner.vue --> <template> <div :style="bannerStyles" :class="`banner__${position}`"> <slot></slot> </div> </template> <script> const defaultStyles = { left: 0, right: 0, }; export default { props: { position: { type: String, default: 'top', validator(position) { return ['top', 'bottom'].indexOf(position) > -1; }, }, styles: { type: Object, default: () => ({}), }, }, data() { return { bannerStyles: { ...defaultStyles, ...this.styles, }, }; }, }; </script> <style lang="scss" scoped> .banner { padding: 12px; background-color: #fcf6cd; color: #f6a623; text-align: left; position: fixed; z-index: 2; } .banner__top { top: 0; } .banner__bottom { bottom: 0; } </style>
我们将Banner.vue置于src/components目录下，同时在该目录下新建一个index.js文件，用来注册Vue组件。
// src/components/index.js import Vue from "vue"; import Banner from "./Banner.vue"; const Components = { Banner }; Object.keys(Components).forEach(name => { Vue.component(name, Components[name]); }); export default Components;
接下来我们修改一下@vue/cli自动生成的src/components/HelloWorld.vue文件，引用一下我们刚刚编写的Banner组件：
<!-- src/components/HelloWorld.vue --> <template> <div> <!-- 下面插入了我们刚刚编写的Banner组件 --> <Banner>This is a banner!</Banner> <h1>{{ msg }}</h1> <p> For a guide and recipes on how to configure / customize this project,<br> check out the <a href="https://cli.vuejs.org" target="_blank">vue-cli documentation</a>. </p> <!-- 省略部分内容 --> </div> </template> <script> <!-- 省略有关内容 --> </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> <!-- 省略有关内容 --> </style>
修改一下项目的主入口main.js
// src/main.js import Vue from 'vue'; import App from './App.vue'; // 引用我们的自定义组件 import "./components"; Vue.config.productionTip = false; new Vue({ render: h => h(App), }).$mount('#app');
因为前面定义style时使用了scss，所以还需要安装两个开发环境依赖项
yarn add sass-loader node-sass -D
最后执行
yarn serve
就可以在localhost:8080看到效果了：
添加Banner后的页面效果
可以看到，我们编写的Banner组件已经成功在页面上渲染出来了。
打包
接下来，我们需要对这个组件进行打包。这里我们可以使用@vue/cli 3.0自带的打包功能。打开package.json文件，在scripts中增加一项：
{ "scripts": { "package": "vue-cli-service build --target lib --name my-banner ./src/components/index.js" } }
然后执行yarn package，会在dist目录下生成下列文件：
├── demo.html ├── my-banner.common.js ├── my-banner.common.js.map ├── my-banner.css ├── my-banner.umd.js ├── my-banner.umd.js.map ├── my-banner.umd.min.js └── my-banner.umd.min.js.map
接下来，需要将package.json中的main字段指向刚刚生成的库文件。这里以commonjs为例（umd应该也是没问题的）：
{ "main": "./dist/my-banner.common.js" }
然后，我们需要在package.json的files字段中声明这个组件库项目需要包含的文件：
{ "files": [ "dist/*", "src/*", "public/*", "*.json", "*.js" ] }
这样就可以打包阶段就算是完成了。
发布
注册NPM账号并创建组织
首先登陆NPM官网
npmjs.com