process-tsvue

tsVue

Lints和修复文件

npm run lint

打包库

npm run dist

项目工程结构介绍

 |-- tsVue,
      |-- postcss.config,// postcss配置文件
      |-- .eslintignore,//忽视进行eslint的文件
      |-- .eslintrc.js,//eslint配置
      |-- .gitignore,//git忽视文件
      |-- README.md, //插件库使用文档说明【重点】
      |-- babel.config.js,//babel配置文件
      |-- components.json,// 注册组件的统一入口【重点】
      |-- package.json,//npm 配置文件
      |-- vue.config.js,//相关webpack配置文件
      |-- build,//webpack配置文件
      |   |-- config.js,//tsvue 组件库打包配置公共文件
      |   |-- webpack.common.js,//tsvue.common.js配置文件
      |   |-- webpack.component.js,//组件库分包配置文件 
      |   |-- webpack.conf.js,//index.js 配置文件
      |   |-- md-loader，//文档库打包配置
      |   |-- bin,
      |       |-- build-index.js,
      |       |-- gen-cssfile.js,
      |-- lib,//打包完的库
      |-- packages,//组件库
      |   |-- theme,//样式库
      |       |-- README.md,
      |       |-- gulpfile.js,
      |       |-- package.json,
      |       |-- lib,打包样式库
      |       |-- src,//放置样式的文件夹
      |           |-- base.scss,
      |           |-- button.scss,
      |           |-- index.scss,
      |           |-- common,
      |           |-- mixins,
      |-- packages-entry,//插件库入口【重点】
      |   |-- index.js,//引用注册【入口】
      |   |-- directives,//指令文件夹
      |   |-- filters,//过滤器文件夹
      |   |-- utils,//单元文件夹
      |-- public,
      |   |-- favicon.ico,
      |   |-- index.html,
      |-- src,//例子入口
          |-- docs,//api文档编辑
          |-- App.vue,
          |-- main.js,
          |-- assets,
  

组件库开发注意事项

• 如果封装组件涉及到样式的，请在 packages/theme/src 添置对应的与组件同名的.scss 文件。方便后续打包自动生成css 分离文件。
• 可以手动添加或者执行 npm run build:theme 创建文件
• 将组件中编写好的样式直接copy到对应的.scss 文件中
• 如果在执行npm run build:theme 相关操作的时候注意核实是否用到样式，防止出现样式未被打包的情况。
• 每次新增组件需要手动配置 components.json 进行映射

上传库

1、登入
npm login --registry=http://27.154.242.142:18690/repository/npm-hosted/
2、发布
npm publish --registry=http://27.154.242.142:18690/repository/npm-hosted/
3、下载
 npm  install --registry=http://27.154.242.142:18690/repository/npm-group/
4、替换请求源 让现场人员统一执行这句命令
npm config set registry http://27.154.242.142:18690/repository/npm-group/
4.1执行完这句命令后，安装插件 也是用npm install
4.2 查看是否成功替换请求源
npm config list

注意：  
    package.json配置的地方：
    "name": "tsvue",库名  
    "version": "0.1.0",版本号
生产的库名是tsvue
测试的库名是tsview

packages/theme  中的 package.json
  "name": "tstheme",
  "version": "0.0.0",

这两个版本号要一致

样式的使用

###1、安装

npm i tstheme -S

###2、 使用--使用Sass导入

@import 'tstheme';

Or Use webpack

import 'tstheme';

Or

<link rel="stylesheet" href="path/to/node_modules/tstheme/lib/index.css">

Import on demand

import 'tstheme/lib/input.css';
import 'tstheme/lib/select.css';