样式的架构
packages/theme - 这个项目分离开 BEM
mixins
config.scss // 放一些全局配置相关的内容
$namespace: 'z'; // 命名空间
$status: 'is-'; // 状态
$sep: '--'; // 状态权限
$bk: '__'; // 元素分割
common
var.scss // 全局类的
@import "../mixins/config.scss"; // 把全局的配置引入
// 定义全局颜色
// 变量组合使用
.#{$a + '-' + $b} {
}
@mixin b($block) {
$B:$namespace+'-'+$block;
.#{$B} {
$content // 调用代码中的内容。
}
}
@include b(button) {
color:red // $content和插槽一样 就是这段代码
}
@at-root 放到跟上 .a{.b{.c{.d{@at-root{a}}}}}
.#{&+'xx'} &代表最近的那层
fonts
iconfont
font-class 多一些 下载完事
更多操作编辑项目
配置一些名字
FontClass 前缀默认是icon-
改成z-icon
font-family
z-ui-icons
css
eot 可以不用为了兼容IE9
woff2
bas64 这一堆都不要
这个css要放到icon组件里面去
保留
【woff】
【truetype】
用的时候需要额外在加个样式 <i class="z-ui-icons xxx" /> 每个都需要多家 z-ui-icons
修改带font-family的那段
[class^="#{$namespace + '-icon-'}"]
.ttf
.woff
直接放到fonts里面记得在iconfont.scss修改路径
scss
button.scss
icon.scss
iconfont.scss的样式放到这里
icon.vue 如何使用？
<i :class="z-icon-${name}" />
样式入口放到哪里？
创建index.scss
@import "./icon.scss"
@import "./button.scss"
// 采用bem规范
// z-xxx__header
// z-xxx--status
搭建一个组件的浏览css的
// 在website
// 在用之前需要在项目根目录yarn install 会把 theme也放到node_modules
// 注意theme是一个用lerna创建的
// 创建package.json
{
name: "theme",
version: '1.0.0'
}
main.ts 引入 index.scss
这个scss需要单独的打包
// 用gulp去打包css
// yarn add gulp gulp-autoprefixer gulp-cssmin gulp-dart-sass gulp-rename -D -W gulp 图省事可以用方便打包个css js等等
gulpfile.js
const { series, sre, dest } = require('gulp')
const sass = require( 'gulp-dart-sass")
const autoprefixer = require( 'gulp-autoprefixer")
const éssmin = require( 'gulp-essmin")
function compile() { // 处理5css文件
return src('./src/*.scss')
.pipe(sass.sync ())
.pipe(autoprefixer ({}))
.pipe(cssmin())
.pipe(dest('./lib'))
}
function copyfont()（ 11 拷贝字体样式
return src('./src/fonts/**').pipe(cssmin()).pipe(dest('./lib/fonts'))
}
exports.build = series(compile, copyfont)
// theme下面所有内容放到src下面方便打包
// 修改package.json scripts
"build:theme": "gulp build --gulpfile ./packages/theme/gulpfile.js" // 会给每一个scss都打包一下
如何用lerna打包组件库
打包 umd es 按需加载
// 需要三套配置文件
// 跟目录创建build
UMD
// build/webpack.config.js
// webpack.config.js 全部打包
const path = require("path");
const {VueLoaderPlugin} = require("vue-loader")
module.exports = {
mode: "production",
entry: path.resolve(__dirname, '../packages/z-ui/index.ts'),
output: {
path: path.resolve(__diranem, '../lib'),
filename: 'index.js',
libraryTarget: 'umd', // commonjs amd 不支持 esm 可以在浏览器用
library: 'z-ui',
},
externals: { // 忽略在代码中引用的vue变量 xx from "vue" 用到了这个东西不需要打包 排除完了到爆是非常小的
vue: {
root: 'Vue', // 跟的就是大写的 全局引入的是Vue Vue({})
commomjs: 'vue', // 代码引入的是小vue xxx from "vue"
commonjs2: 'vue',
}
}
,
// 可以解析哪些类型
resolve: { // 解析模块对应的扩展名 倒入的时候支持哪些后缀处理是loader处的
extensions: [
'.vue',
'.ts',
'.tsx',
'.js'
]
},
module: {
rules: [
{
test: /\.(t|j)sx?$/,
exclude: /node_modules/,
loader: 'babel-loader', // 创建.babelrc.js module.exports = {
presets: [ '@babel/preset-env', "@babel/preset-typescript" ] // babel的预舍反着执行 先搞typescript -> @babel/preset-env高级语法转低级语法
}
},
{
test: /\.vue$ /,
loader: 'vue-loader' // 这个逼玩意需要配合一个插件
},
]
},
plugins: [
new VueLoaderPlugin({})
]
}
// package.json
// preDependsxxx 告诉你项目需要的依赖没啥实际意义。
// scripts webpack --config ../build/webpack.config.js
// 按需加载babel-import-plugin
// 按需加载的前提是是组件的每一个都需要打包出来
// demo 一下
import ZUI from "./lib/index.js"上面打包后的产物
如何用esm?
// 用rollup打包
yarn add rollup rollup-plugin-typescript2 rollup/plugin-node-resolve rollup-plugin-vue -D -W
rollup.config.js
import typescript from 'rollup-plugin-typescript2';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import path from 'path';
import { getPackagesSyne } from '@lerna/project'; // 可以获取所有包的名字
import vue from 'rollup-plugin-vue';
// 获取packages目录下面所有的package.json 拿到了所有的打包名字
const inputs = getPackagesSync().map(pck => pck.name).filter(name => name.
includes ('@z-ui"));
export default {
// 入口
input: path.resolve(__dirname, `../packages/z-ui/index.ts`),
output: {
format: 'es', // 打包个什么
file: lib/index.esm.js // 打包到哪里去
},
plugins: [
nodeResolve(),
vue({
target: 'browser'
}),
typescript ({ // 默认调用tsconfig.json 配置文件里面有生成声明文件这个玩意会帮助我们生成声明文件
tsconfigOverride:{
exclude: [ // 排除 node_modules 和 website
'node modules',
'website'
]
}
})
],
external(id) {
return /^vue/.test(id)
}
}
// 组件的本身不需要样式所以也就没有样式相关的配置。
// scripts
"build:rollupesm": "rollup -c ./build/rollup.config.js"
// 这个是打包所有的esm到index.esm.js
// deom
import ZUI from "./lib/index.esm.js"
按照组件去打包
rollup.config.spiesm.js
import typescript from 'rollup-plugin-typescript2';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import path from 'path';
import { getPackagesSyne } from '@lerna/project'; // 可以获取所有包的名字
import vue from 'rollup-plugin-vue';
const inputs = getPackagesSync().map(pck => pck.name).filter(name => name.
includes ('@z-ui"));
export default inputs.map(name=>{
const pckNmae = name.split('@z-ui')[1];
input: path.resolve(__dirname, `../packages/${pckNmae}/index.ts`),
output: {
format: 'es', // 打包个什么
file: `lib/${pckNmae}.esm.js` // 打包到哪里去
},
plugins: [
nodeResolve(),
vue({
target: 'browser'
}),
typescript ({ // 默认调用tsconfig.json 配置文件里面有生成声明文件这个玩意会帮助我们生成声明文件
tsconfigOverride:{
compilerOptions: {
declaration: false, // 不需要在生成声明文件
},
exclude: ['node_modules']
}
})
],
external(id) {
return /^vue/.test(id) || /^@z-ui/.test(id) // /^@z-ui/.test(id) 忽略自己写的组件因为外边已经打包了
}
})
"build:rollupesm": "rollup -c ./build/rollup.config.spiesm.js"
// demo
import ZUI from "./lib/button/xx.ems.js"
