qt-base-ui v0.1.1

qt-npm-vue-packages-base

这是一个vue的npm组件库基础架子。

介绍

1. 目录结构

build （webpack 配置文件夹）
lib  （打包后组件库）
  - theme （组件样式）
  - component-a （单个组件，按需引入）
    - index.js 
  - index.js （全部组件，整体引入）
src （项目开发文件）
  - assets （公共资源目录）
  - components （vue 组件集合）
    - component-a
      - src
        component-a.scss （组件样式）
        component-a.vue （组件）
      - component-a.test.js （组件测试用例）
      - index.js （组件入口）
  - directives （vue 自定义命令）
  - mixins （vue mixins）
  - styles （样式）
    - index.scss
  - utils （公共方法）
    index.js
  - entry.js （组件入口）
  - index.js （项目入口）

2. 命令介绍

2.1 单元测试命令

npm run test

2.2 语法自动检查命令

npn run lint

2.3 启动本地文档命令

npn run dev

2.4 打包命令 分别进行 整体打包（用于全局引入），组件单独打包（按需引入）

npn run build

2.5 整体打包 （用于全局引入组件）

npm run build:web

2.6 组件单独打包 （按需引入）

npm run build:com

使用

1. 基础模板使用和修改

开发新的组件库时需要进行一些先关的修改：

1. build/webpack.config.js 修改

output: {
  ...,
  filename: "[new project name].js",
  library: "[new project name]",
  libraryTarget: "umd"
}

2. package.json

{
  "name": "[new project name]",
  "version": "0.1.0",
  "description": "新项目描述",
  "main": "lib/[new project name].js",
  ...
}

简单修改完，就可以在 src 目录下进行先关开发。

2. 打包发布到 npm

发布到 npm 需要先到官网进行账号注册。这里需要注意一点的是，镜像源需要切换回默认的 npm 源。

• 打包

npm run build

• 登录 npm ，只需登录一次就行

npm login

• 登录成功后，发布/更新

npm publish

注意每次修改，打包发布时，记得要修改 package.json > version 版本号，每次加一。