搭建项目
用Vue Cli3.x搭建
进入需要创建项目的目录,按住 shift 右键选择 “在此处打开powershell窗口”或“命令行提示符”
使用vue create命令,比如创建一个名为 vinsea 的项目,输入
vue create vinsea自定义配置
最终配置如下
css预编译工具选自己喜欢的
eslint要不要都行,个人建议安装,规范代码
项目结构
最终生成好的项目结构如下
可以删除跟 HelloWorld.vue 相关的代码
编写组件
组件可以简单的分为单个组件和多个组件
单组件
在 components 文件夹下新建一个 .vue ,名字随意,但要符合Vue组件规范: https://cn.vuejs.org/v2/style-guide/
比如 BaseInput.Vue ,给原生 input 加一些简单的功能
这时候src目录结构为
src
├── assets
├── components
│ └── BaseInput.Vue
├── App.vue
└── main.js2
3
4
5
6
导出
在 components 下新建一个 index.js,内容为
// 导入组件
import BaseInputfrom "./BaseInput";
// 给组件加install方法,供按需引入
BaseInput.install = Vue => Vue.component(BaseInput.name, BaseInput);
// 导出组件
export default BaseInput;2
3
4
5
6
7
8
这时候,一个单组件就完成了,可以进入下一步本地测试,如果是多个组件,继续往下看
多个组件
// TODO
导出
// TODO
本地测试
单个组件(按需加载)
在 App.vue 中
引入组件
import BaseInput from "./components/BaseInput";
export default {
name: "app",
components: {
BaseInput
}
}2
3
4
5
6
7
8
模版中使用
<template>
<div id="app">
<base-input></base-input>
</div>
</template>2
3
4
5
npm run server 启动项目就可以调试
多个组件(全局安装)
// TODO
发布
发布之前,需要配置一下项目
自定义配置
这一步是将 css 以内联的方式与组件绑定,可以按照自己需求来,如果不需要将css以内联形式导出,就可以跳过
在根目录下添加 vue.config.js ,这是Vue Cli3用于覆盖webpack配置的文件,类似cli2的 webpack.base.conf.js
/**
* Author:Vinsea.
* CreateDate:2019/4/19 13:13.
* Describe: 自定义配置文件
*/
module.exports = {
css: {
extract: false
}
};2
3
4
5
6
7
8
9
10
修改package.json
1、将 dependencies中的 core-js和 vue放到 devDependencies中,因为要使用组件的项目肯定是vue项目,组件只是开发时需要用到。
2、必须添加的一些属性:
"name": "@com.vinxea/base-input",
"description": "base-input",
"version": "0.0.1",
"author": "Vinsea(https://www.vinxea.com)",
"main": "lib/base-input.umd.min.js",
"files": [
"lib",
"src"
],2
3
4
5
6
7
8
9
其中 name 必须是@ 开头,@com.vinxea表示“scope”,可以理解为包名,这样不容易和其他包重复,而且如果有多个组件,都可以在这个包下找到
main 是指组件打完包以后的入口,下面会解释
files 是指需要打包后需要保留的目录,可以只写 lib(lib文件夹是我自定义的,下面会解释)
注意,如果公司有自己的代理仓库,需要加一个publishConfig属性,registry 值为公司代理仓库的地址,比如
"publishConfig": {
"registry": "http://npm-registry.xxxxxxx.com/repository/npm-releases/"
}2
3
3、新增一条打包命令
"scripts": {
"lib": "vue-cli-service build --target lib --name base-input --dest lib src/components/index.js"
},2
3
这是 Vue cli3.x的构建库命令,具体可以看官网: https://cli.vuejs.org/zh/guide/build-targets.html
它主要需要四个参数:
target: 默认为构建应用,改为 lib 即可启用构建库模式
name: 输出文件名
dest: 输出目录,默认为 dist,这里我们改为 lib
entry: 入口文件路径,默认为 src/App.vue,这里改为 src/components/index.js
执行 npm run lib 后,根目录下会生成一个 lib 文件夹
注册/登录npm
注册
可以通过 npm adduser 命令创建一个账户,或者到 npm 官网注册:https://www.npmjs.com/
登录
如果要发布到公司仓库源上,就需要将npm镜像换为公司的
npm config set registry http://xxxxxxxxxx如要发布到npm官网上,并且以前改过 npm 的镜像地址,比如使用了淘宝镜像,就先改回来
npm config set registry http://registry.npmjs.org然后登录,执行以下命令后,输入帐号密码
npm login注意,输入密码的时候,控制台不会回显,不是键盘坏了,其实已经输入了,为了安全考虑,就没有回显 控制台出现以下字样说明登录成功
Logged in as dev on http://xxxxxxxxxxxx.发布
npm publish网不好的话会有点慢,最后一行输出以下内容表示发布成功
+ @com.vinxea/base-input@0.0.1最后测试
官网查看
去 https://www.npmjs.com/ 的搜索框搜索组件名,可以看到组件相关信息
安装测试
在当前项目下,安装已经上传的组件
npm install --save @com.vinxea/base-input按照刚才“本地测试”的步骤,再测一遍
总结
如果是单组件的话,其实可以不用打包,直接上传,package.json的入口指向这个vue文件。
开发组件还需要注意引用第三方组件时,能按需就按需,防止项目过大。
可以多看优秀的ui库的源码,学习大佬们的思路。
参考: http://www.cnblogs.com/wisewrong/archive/2018/12/28/10186611.htmlhttp://www.rxshc.com/180.html