QuickShare

开发指南

搭建项目

安装项目依赖

  • Vue-cli搭建一个空项目，安装项目所需依赖包。

编写自定义组件

  • 组件名称开头大写。组件样式文件(.scss)和源码文件(.vue)放在同级。
  • 编写自定义组件，将组件源码放入总src文件夹下。
  • 每个组件创建一个自己的文件夹。
  • 总src文件夹下面assets文件夹，包含公用样式的文件夹（styles）和公用方法的文件夹（utils）。

注意：（1）公用样式和方法放在公用模块，组件内部的样式写在各自组件的.scss文件和.js文件。
（2）字体和图标放在公用样式的同级目录下。

  • 上传组件源码目录结构：

    目录结构

组件添加

添加文件夹

  • 在总的src文件夹下，添加组件，组件目录如下：
    组件目录结构

  • 组件内部包含两部分内容：
    （1）组件本身代码src文件夹（.scss和.vue）
    （2）注册功能组件。每个组件有一个入口文件index.js，里面包含install注册函数。index.js放在组件src根目录下。

 




  import PortLog from './src/PortLog.vue'
    PortLog.install = function (Vue) {
      Vue.component(PortLog.name, PortLog)
  }
  export default PortLog
1
2
3
4
5
  • 组件命名方式
    （1）有意义的名词、简短、具有可读性

    （3）组件文件夹的名字使用组件去掉公司前缀的组件名(例：portLog)

    （4）文件夹命名主要以功能模块代表命名

    组件中.vue文件内name属性使用Qs开头，后面添加描述组件的命名。
    例 name: 'QsTableCommon'
 export default{
    name: 'QsTableCommon',
    props: {
    }
    ......
  }
1
2
3
4
5
6

注意：组件内.vue文件内必须含有name属性，开头使用Qs...命名方式。

  • 总的index.js文件的注册所有的组件，写入当前组件的版本号version: '1.0.1'，和上传时配置的package.json的文件版本号保持一致。
import PortLog from './components/portLog/index.js'
import TableCommon from './components/theTableCommon/index.js'

const components = [
  PortLog,
  TableCommon
]
const install = function (Vue) {
  components.forEach(component => {
    Vue.component(component.name, component)
  })
}

if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

export default {
  version: '1.0.1', // 当前组件的版本号
  install,
  PortLog,
  TableCommon
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

webpack配置

添加component.json文件

  • 添加component.json，放在项目package.json文件同级目录下。
  • 文件引入总的入口文件和各个组件的入口文件。
  {
    "port-log": "./src/components/portLog/index.js",
        ......
    "index": "./src/index.js"
  }
1
2
3
4
5

注意：打包生成的命名方式使用中横线连接，每一个逻辑断点使用一个中横线，不能使用驼峰形式。

修改webpack中打包配置

  • 修改项目config文件夹下index.js文件，可以修改打包完成后的文件名。





 





  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths 修改打包完成文件名
    assetsRoot: path.resolve(__dirname, '../lib'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    ......
  }
1
2
3
4
5
6
7
8
9
10
  • 修改build问价夹下webpack.prod.conf.js文件，整理各个组件入口。
    该文件取消引入HtmlWebpackPlugin
  const env = require('../config/prod.env')
  // 整理各个组件入口
  const components = require('../components.json')
  const entrys = {}
  Object.keys(components).forEach(item => {
    entrys[item] = components[item]
  })
1
2
3
4
5
6
7
  • 在build文件夹下添加webpack.prodAll.conf.js文件，然后在文件中添加组件的总入口。
    该文件取消引入HtmlWebpackPlugin



 




  const webpackConfig = merge(baseWebpackConfig, {
    entry: {
      // 设置打包组件的总入口文件
      'index': './src/index.js'
    },
    ......
  })
1
2
3
4
5
6
7

组件测试

  • 修改webpack.dev.conf.js配置文件，修改入口文件为main.js



 




  const devWebpackConfig = merge(baseWebpackConfig, {
    entry: {
      // 设置测试项目的入口文件
      app: './src/main.js'
    },
    ......
  })
1
2
3
4
5
6
7
  • 在components同级文件夹devPage文件夹放测试页面
  • router文件夹存放测试页面路径
  • 使用npm run dev 命令运行测试项目

组件打包

  • 使用 npm run build 打包组件。
  • 使用 npm run build_all 打包加入组件总入口。
  • 修改打包上传的配置文件（package.json）
    name: 组件库名称（不能与npm公网上名称重复，名称使用中横线连接，使用小写字母）
    version: 版本号。每更新一次版本，版本号不能重复。
    private: 修改为false。
    main: 打包后生成的入口文件。
  • 组件上传。
    申请npm账号；
    npm login 登录账号；
    如果下载依赖包源地址是淘宝镜像地址，修改为npm源地址（npm config set registry http://registry.npmjs.org）；
    上传组件包（npm publish --registry=http://registry.npmjs.org）；

组件库删除

  • npm login登录账号；
  • 删除组件库（npm unpublish 包名 --force）

组件使用

安装组件 npm install quick-share-ui；

  • 全部引入
    在引入组件库的项目中的main.js中导入全部组件，引入组件样式。
import QuickShareUI from 'quick-share-ui'
import 'quick-share-ui/lib/theme/index.css'
Vue.use(QuickShareUI)
1
2
3
4
  • 按需引入
    在引入组件库的项目中的main.js中引入部分组件，引入组件样式。
import {port-log} from 'quick-share-ui'
import 'quick-share-ui/lib/theme/index.css'
Vue.use(port-log)
1
2
3

按需引入组件，需要下载安装babel-plugin-componentnpm install babel-plugin-component -D
修改.babelrc文件

  "plugins": ["transform-vue-jsx", "transform-runtime", ["component", {
    "libraryName": "quick-share-ui",
    "styleLibrary": {
      "name": "theme",
      "base": false
    }
  }]],
1
2
3
4
5
6
7
  • 使用组件，传入组件对应参数。
<qs-port-log
  ...
  ...
></qs-port-log>
1
2
3
4

组件版本控制

  • 组件库名称： quick-share-ui
  • 内部组件命名：...-...
  • 版本号：当前版本：1.0.1
    修改组件整体风格和框架结构 修改版本号2.0.1 依次类推
    新增组件 修改版本号1.1.1 依次类推
    修改组件bug和优化代码 修改版本号1.1.2 依次类推

← 接口日志--portLog →