tect-com-plus

tect-com-plus

一、项目结构

tect-com-plus/
|- build/   项目打包时用到的脚本（复制source/scss里mixins和variables到lib）
|- examples/   案例目录
|- lib/   组件库打包后的目录
|- packages/   组件库源代码目录
|- source/   资源文件

packages/
|- api/  一些在组件库用到的接口地址
|- directive/  全局指令
|- functional/  全局弹窗（$dialog $toast） 不需要引入组件 直接在script里用
|- scss/  全局样式
|- utils/  全局方法
|- vuex/  共用的vuex 可在项目按需引入
|- validate / 表单校验
|- .../  其他的是组件

二、项目运行

执行这个命令运行项目，可在examples的App.vue中测试组件

npm install
npm run dev

三、项目打包

npm run lib

(测试可以直接复制lib包到项目里，替换tect-com-plus里的lib, 重新运行就行)

四、上传到npm (如果不需要，可忽略，注意：每次发布前都需要修改package.json里的版本，往上+1)

先注册一个npm账号，注意邮箱验证

1、切换源 （如果配置了淘宝源，先设置回npm源）

执行一次就行

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

2、登录npm

npm login

3、发布

npm publish

五、组件使用

i开头，用 - 拼接文件名即可使用 例如：

<i-nav></i-nav>

svg、tag组件例外

<svg-icon icon-class="" class-name="" width="" height="" color=""></svg-icon>
<tag text="" color="" background=""></tag>

scss的混入和变量引入 需要在项目的styles/index.scss中引入

@import "/node_modules/tect-com-plus/lib/mixins"

五、注意

source/svg 不能跟项目共用，如果组件库用到了某个svg，需要复制一份去项目，其他的静态资源可共用

i-tabs: 如果你的tabs组件的滑块位置不对，记得传入一个id(或者用v-if)