canuse-pc样式库

项目介绍

canuse-pc, 计划中...（先把名字取下来吧，哈哈）由开发者方权开发的小体量PC端UI样式库， 仅供学习交流使用-获取更多资源请关注公众号前端一休。

说明

本插件依赖[email protected]， 安装本插件的同时也会安装font-awesome。 在使用UI样式库的时候可以引用对应的CSS文件;

import 'font-awesome/css/font-awesome.min.css'; import 'Canuse-ui/css/Canuse-ui.min.css';

同时，本插件已经使用js文件打包了两个css文件，在支持css模块的项目里也可以像下面这样直接引用插件： import 'Canuse-ui';

下面是npm发布的一点经验

UI 框架的继承
1.使用文件形式直接集成·
## node.js + npm + npx 
@ Tips:
Node.js  是运行在服务端的 JS  语言，可以用来处理前端的文件，它是我们这一节要用到的工具的环境基
础。
npm (Node.js Package Manager)  ，是 Node.js  的包管理工具，主要用来管理 Node.js  项目的依赖包，包括
对包的安装、查看和卸载等。
npx ，这个工具是 Node.js  插件的执行工具，它可以执行 npm  包中包含的命令。

分别安装 node npm 和 npx
npm i [email protected] -g
npm init

postcss 兼容css工具
npm i [email protected] -D

npx postcss  要处理的 CSS  文件位置 -o  生成目标文件的位置
npx postcss src/Canuse-ui.css -o dist/Canuse-ui.css

对 @import  的处理   (各个文件的内容都被集成到这一个文件里了)
npm i [email protected] -D
npx postcss src/Canuse-ui.css -o dist/Canuse-ui.css -u postcss-import --no-map

@ Tips:
这里要注意两个问题：
1 、文件中引入字体图标库用的远程 @import  并不会被替换，但会被提到文件的最前面。
2 、我们的项目里没有涉及图片，如果需要处理图片的项目可以使用 “postcss-url” 来处理图片的路径问题。

Autoprefixer添加浏览器前缀
npm i [email protected] -D
npx postcss src/Canuse-ui.css -o dist/Canuse-ui.css -u postcss-import autoprefixer --no-map

autoprefixer  的兼容性配置方式使用的是 browserslist 工具提供的规则，所以我们按着 browserslist  的规则来配置需要的规则就可以了，这个工具需要在项目的根目录上建立 “.browserslistrc” 这个文件
> 0.5%
last 2 version
not ie <= 10
not ie_mob <= 10

cssnano 压缩css文件 - 生产min.css文件
npm i [email protected] -D
npx postcss src/Canuse-ui.css -o dist/Canuse-ui.min.css -u postcss-import autoprefixer cssnano --no-map

最后 shell 脚本的编写  代替大串命令
1.根目录新建 shell 目录 , 里面新建 build.sh 文件

1.1 - build.sh文件内容:
# 清空dist目录中的旧文件
echo '正在清除原有dist文件...'
rm -rf dist/*.css

# 打包出不压缩的css文件Canuse-ui.css
echo '正在生产Canuse-ui.css文件'
npx postcss src/Canuse-ui.css -o dist/Canuse-ui.css -u postcss-import autoprefixer --no-map

# 打包出被压缩的css文件Canuse-ui.min.css
echo '正在生产Canuse-ui.min.css文件'
npx postcss src/Canuse-ui.css -o dist/Canuse-ui.min.css -u postcss-import autoprefixer cssnano --no-map

2. 这个脚本很简单，就是顺序执行几条命令：
首先是清空原有的 dist  目录，来避免一些不必要的错误。
然后执行生成 /dist/Canuse-ui.css  文件的命令，就是刚才在解决兼容性问题时用的那条命令。
最后执行生成 /dist/Canuse-ui.min.css  这个压缩文件的命令，也就是上一步我们用过的那条。
制作完这个脚本以后，再想打包项目，就可以直接在项目里调用这个脚本了。可以在项目根目录执行：
./shell/build.sh
执行后就会在dist目录里生成新的文件

3. npm包的制作 分三部分：项目初始化、依赖的配置和添加文件说明
[1]：项目初始化
npm init 输入自定义文件说明配置
在 canuse-ui-npm  目录下创建一个名为 “css” 的目录，然后把之前项目里生成的最终文件 canuse-ui.min.css  移到新建好的 css  目录里。这样项目初始化的工作就完成了
[2]：依赖的配置
npm i [email protected] -S  目的是为了改变之前字体样式通过链接加载，这里通过npm安装依赖
中间省略一些，因篇幅过多，具体想了解可以查看 35 章节 依赖配置部分
4. npm 包的发布 
[1]：注册 npm 账号
官方地址是 https://www.npmjs.com/

[2]：查看npm源
npm config get registry

[3]：如果是淘宝源就改回官方源,
npm config set registry https://registry.npmjs.org

[4]：npm包的发布
初始化npm用户信息
npm adduser 
只有使用第一次发布的时候才需要使用npm adduser ，后面再登录，直接使用下面的命令即可
npm login
[5]：添加好用户信息和验证邮箱后 就 运行 npm publish 发布npm包
npm publish