budnpm-demo v1.0.47

1 项目说明

1.1 npm命令

使用vue webpack-simple模式进行构建。使用了真北环境nexus3作为了npm的私服，可从私服下载npm包与上传npm包到私服（需要连接vpn），需要先在C盘——user——.npmmrc文件增加如下配置： registry=http://10.10.9.25:30045/nexus3/repository/npm-group/

项目启动

npm install

npm run dev

项目打包

npm run build:test 测试环境 npm run build 生产环境 成功后会在根目录下生成dist文件夹

登录npm私服(仅第一次)

npm login --registry=http://10.10.9.25:30045/nexus3/repository/npm-hosted/

需要admin管理员配置帐号

发包上传到私服

npm publish --registry=http://10.10.9.25:30045/nexus3/repository/npm-hosted/

私服配置了包可重名，即一个版本的包可以多次上传，可方便调试的时候使用。实际更新的时候在package.json中改写version字段。

1.2 文件说明

webpack.config.js

entry字段为配置入口文件，根据NODE_ENV的不同对应不同的文件。本地开发对应main.js,打包对应index.js

dependencies.js

主要作用是注册第三方依赖组件，如element-ui。 由于在main.js和index.js中两个入口都需要对外部依赖组件进行引入注册，故将公共方法抽出。 主要需要进行开发的地方在于填充dependencies这个数组。

singleComponent.js

按需引入时需要对导出的每个组件进行第三方依赖的注册，开发时可不用关心此文件。

index.js

打包的入口文件，可以导出多个组件，支持全局注册和按需引入

main.js文件与平时前端本地开发无异，主要对index.js进行说明。

1.把需要导出的组件填充至components数组里

2.定义需要按需引入的组件变量，进行实例化封装,如：

const top = new componentClass(_top, dependencies);

3.在export中和export default中分别定义能够全局注册和局部注册的组件

// 按需引入
export {
  top,
  keybord
}

// 全局注册
export default {
  install,
  _top,
  _keybord
}

config.js

根目录下有多个config文件，对应本地调试、测试环境打包、生产环境打包。组件内部有接口时候可在config写上不同环境的域名。在打包的时候会根据命令指向对应的config文件。（代码可见request.js和webpack.config.js中配置的代理）

2 组件开发

测 试

this.$message.error('测试')

依赖模块已在打包时注册好，不需要再在页面中定义

需要定义export default中的name，对应了npm下载后实际使用组件时用的html标签。

已引入node-saas和saas-loader，可使用scss

已在.babelrc添加配置，可使用ES6语法

3 下载并使用组件

3.1 下载

npm install bud-saas-header --save 需要完成上述步骤的.npmmrc配置修改后才可从私服下载。

测试环境设置了包版本可重名，对同一个版本的包可以多次publish。其它项目更新可以直接输入npm install bud-saas-header进行更新。

3.2 使用

3.2.1 全局注册

在main.js中

import Header from 'bud-saas-header';
Vue.use(Header);

vue文件中

<top/>
<keybord/>

3.2.2 局部引入

import {top, keybord} from 'bud-saas-header'
Vue.use(top).use(keybord);

3.2.3 路由注册

import {keybord} from 'bud-saas-header'

   {
      path: '/test',
      name: 'Test',
      component: keybord.component
    }