Stargis 公共组件库

组件库改变

由原来的源码直接暴露于项目文件，改为一个独立项目通过npm来控制发布。

项目结构

build                         // webpack 配置文件

config                        // webpack 用户配置文件

node_modules                  // node 模组

publish -
      package.json            // 发布用的信息包

src  -
      components              // vue组件文件

      App.vue                 // 项目测试页面

      main.js                 // 项目dev入口

      register.js             // 项目组件注册器 项目prod入口

static

.postcssrc.js                 // postcss 配置文件

index.html                    // html 模版

package-lock.json             // 工具版本管理

package.json                  // 工具版本管理

1. 开发模式

1.1 启动指令

npm run dev

1.2 组件文件夹

在/src -> components 下编写独立组件。

内部的vue组件于普通vue写法相同。

1.3 register.js （组件注册器）

//引用 components组件文件夹中的组件
import Attachment from './components/Attachment';

const Components = {
  Attachment
  // 将引入的组件填入此 Components 对象中
};

function install (Vue) {

  Object.keys(Components).forEach((key) => {
    Vue.component(key, Components[key]);
  });
}

export default install;

添加新组件，删除组件，重命名组件都要修改组件注册器的引用，否则组件将无法载入甚至报错。

2 生产模式

2.1 打包指令

npm run build

打包过后会产生一个dist文件，包含一个app.js最终文件，内部拥有全部的组件。

3. 发布

3.1 设置npm全局官方源

 npm config set registry http://registry.npmjs.org

发布新版本需要切换至npm官方源

3.2 发布配置文件

/publish -> package.json 发布包的信息文件

{
  "name": "stargis",  // 项目名称
  "version": "0.0.1",  //版本号
  "description": "", //描述
  "main": "app.js", //入口文件
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

3. 发布指令

npm publish

提示： 如果出现 You need to authorize this machine using `npm adduser`

需要执行npm adduser 填入相应账号密码

• npm 账号： stargis
• npm 密码： starproject
• npm 邮箱： [email protected]

[email protected] 邮箱密码： stargis123

发布后十分钟左右就可以拉取新的镜像

使用

只需在根目录引入，无需在项目中重复声明，使stargis的公共组件与项目完全解耦

项目中使用

1. 安装

1.1 设置npm全局本地源

npm config set registry http://172.18.215.15:8088/nexus/content/repositories/taobao-npm/

1.2 安装 stargis 组件库

npm install --save stargis

2. 移除原来的依赖方式

去除原有项目中的 ~~components~~ 文件夹

去除原有项目中的 通过 import 引入的 @component 组件和 components 的声明

// 删除对公共组件的声明
components: {
    flowStep,
    suggest,
    attachmentListTable
},

3. 引入

特别注意stargis的组件库要在iview组件后面注册进Vue中

/src/main.js

import iView from 'iview';
import 'iview/dist/styles/iview.css';

import Stargis from 'stargis';

Vue.use(iView); //注意和stargis的先后顺序

Vue.use(Stargis); //注意和iview的先后顺序