Vue组件库搭建步骤

一、搭建组件库

1. 创建

• 创建项目文件夹 mkdir 项目名字
• 进入文件夹初始化对象

  npm init -y
  

2. 安装

• 安装rollup

  rollup npm install -D rollup
  

• -D 表示局部安装，不加则表示全局安装

3. 修改 package.json 中scripts 的test

• “test”:"内容…"更改为：“dev”:“rollup”

4. 做打包

• 创建src目录，src中创建index.js
• index中写入操作代码，末尾一行为export default {}
• 创建开发模式的配置文件：rollup.config.dev.js
• 创建正式模式的配置文件：rollup.config.prod.js

5. rollup.config.dev.js文件内容配置

• 引用node的path包
• 配置输入/输出路径

    const inputPath = path.resolve(__dirname, './src/index.js')
    const outputPath = path.resolve(__dirname, './dist/imooc.datav.js')
  

• 模块导出

  module.exports = {
    input:inputPath,
    output:{
      file:outputPath,
      // 表示输出的模块协议
      format:'umd',
      name:'imoocDatav'
    }
  }
  //output可为数组，可定义多个output
  //format为umd时，必须有name
  

6. 修改package.json文件

  "scripts": {
    "dev": "rollup -wc rollup.config.dev.js"
  },

• -wc 表示处于监听状态，当rollup.config.dev.js内容发生修改时会自动打包，-c则表示当前打包，rollup.config.dev.js修改后需要再次启动命令行

7. 完成

• 运行

  npm run dev
  

• 在根目录下会创建一个dist文件夹，文件夹中有一个名为imooc.datav.js的文件

8. 使用

• example中创建html文件，script导入imooc.datav.js

二、模块化标准

（主要是3种）

• umd：导出的模块是一个js的function
• cjs(commonjs)：nodejs中使用的一种模块化标准
• es：es6中新增，浏览器默认不支持；使用时需要在script标签中加入type=“module”，但需要放到web服务器上

三、vue复杂项目/组件的开发

1. 配置复杂插件

• rollup-plugin-node-resolve (加载npm模块的插件)
• rollup-plugin-commonjs (bulid时支持commjs类型文件)
• rollup-plugin-babel (bulid之后低版本浏览器可支持es6语法)
• rollup-plugin-json (打包时支持json文件的打包)
• rollup-plugin-terser (打包时对文件进行压缩，减小压缩包体积,只写在…prod.js文件中)
• rollup-plugin-vue (对vue文件进行打包,一定要放在第一个位置)
• @vue/compiler-sfc (对vue文件进行打包,由于上一个插件需要用到本插件，因此不需要导入)
• rollup-plugin-postcss (对vue文件进行打包,需要导入)
• sass (对vue文件进行打包,由于上一个插件需要用到本插件，因此不需要导入)

2. 使用插件

  //rollup.config.dev.js
  const resolve = require('rollup-plugin-node-resolve')
  module.exports={
    ...
    plugins:[
      resolve()
    ]
  }

3. node中默认情况先只允许使用commonjs语法，无法使用es6语法

• 解决方案
  • 安装babel/node和babel/core
  • 创建.babelrc文件
  • 安装@babel/preset-env
• babel插件是将es6语法转换成es5语法，使其可在node中使用
• babel-node使用命令行调试

  bable-node
  require('./src/index.js').default(10)
  //表示调用index.js中的random函数
  .exit //退出bable-node语法
  

4. tree-shaking机制

• bulid时没有备用到的代码都不会被打包

5. package.json文件修改

• main行修改：

  "main": "dist/imooc.datav.js", 
  

• 新增files:表示上传npm后所需要包含的文件

  "files":[
    "dist","src"
  ],
  

• 修改keywords:表示上传后组件的关键词

  "keywords":[
    "vue","imooc"
  ],
  

• 终端运行 npm link

  • 如果出现报错则删除node_modules之后运行npm link
  • 作用是生成一个node_module，之后在本地项目中可以直接引用
  • 因为没有发布到npm上，因此若其他项目需要安装不可通过npm
  • 安装方式：npm link imooc-datav-libs-dev
  • 安装完后，终端会输出该模块的本地地址

• 其他应用调用上一条link的模块

  • 在package.json中写入该模块
  • 控制台npm link 模块名称
  • 启动项目
  • main.js中导入该模块

      import datav from 'imooc-datav-libs-dev'
      createApp(App).use(router).use(store).use(datav).mount('#app')
    

  • 可能出现eslint报错
    • 组件中安装eslint
    • 控制台输入 .node_modules/.bin/eslint --init
      (windows中的cmd中输入：.\node_modules.bin\eslint --init)
      • 选择 to check syntax only
      • javascript modules
      • vue.js
      • no
      • browser
      • javascript
    • package.json中添加 “lint”:“eslint”
      • 用于检查eslint
      • 在项目任意一处中写入eslint检查出错的语法，控制台中npm run lint ,发现没有出现任何报错
      • “lint”:“eslint"修改为"lint”:“eslint ./src”
      • 运行npm run lint 会出现报错
    • 根据以上结论，可在打包时先检查eslint，因此package.json中部分内容可改为

        "bulid": "eslint ./src && rollup -c rollup.config.dev.js",
        "bulid:prod": "eslint ./src && rollup -c rollup.config.prod.js",
      

    • 修改完组件库之后都需要重新打包
    • 此时引入该组件库的项目中会出现该组件，可直接进行引用
    • .eslintrc.js中部分代码需要修改为：

        "env": {
          "browser": true,
          "es2020": true
        },
        "extends": "plugin:vue/essential",
        "parserOptions": {
            "ecmaVersion": 11,
            "sourceType": "module"
        },
      

      否则引用组件库的项目进行打包时会出现错误
  • 按需加载组件库中的组件
    • main.js文件中本来导入的是模块名称，将其修改为

        import datavTestComponent from 'imooc-datav-libs-dev/src/components/Test/index'
      

    • 以大幅度减小构建包的体积

• vue3组件库兼容vue2项目

  • 删除node_modules
  • 删除 “@vue/compiler-sfc”: “^3.0.11”,
  • rollup-plugin-vue降低版本到 “rollup-plugin-vue”: “^6.0.0”
  • 安装"vue-template-compiler": “^2.6.13”
  • 删除组件中的setup,改为vue2中的格式

四、使用svg绘图

• viewport是svg图像的可见区域

• viewBox：用于在画布上绘制svg图形的坐标系统，实现svg图标的自适应

  • 父元素中设定宽高
  • svg元素中设置height和width,viewBox会根据视口和宽高进行svg宽高设置
  • 举例：

    <svg width="20px" height="20px" viewBox="0 0 100 100">
    <line x1="0" y1="50" x2="100" y2="50" stroke-width="8" stroke="currentColor" />
    <line x1="50" y1="0" x2="50" y2="100" stroke-width="8" stroke="currentColor" />
  </svg>
  

  • svgWidth=20/(100-0)=0.2
  • line标签中的每一个坐标都会*0.2
  • 保证svg图像的自动缩放

• preserveAspectRatio ：指定viewport与viewbox不一致时采用的策略

  • 当viewport和viewBox宽高比不同时，指定坐标系在viewport中是否完全可见，同时也可以指定它在viewport 坐标系统中的位置
  • xMidYMid meet
    • meet:表示固定viewbox的宽高比，并且选择压缩比小的为最终宽高比
      • 默认值
    • slice: 保持宽高比并将所有不在viewport中的viewBox剪裁掉
      • 优先采纳压缩比较大的作为最终压缩比
    • xMidYMid:viewBox在viewPort中的定位
      • x和y都有三种情况：Min、Max、Mid
  • preserveAspectRatio:none
    • 不保持宽高比

• svg组件库的封装

  • 将svg内部标签包裹在defs和g标签中，并给g标签指定id

    <svg width="0" height="0" viewBox="0 0 100 100">
      <defs>
        <symbol id="more" viewBox="0 0 100 100">
          <circle r="5" cx="10" cy="25" fill="currentColor" />
          <circle r="5" cx="10" cy="50" fill="currentColor" />
          <circle r="5" cx="10" cy="75" fill="currentColor" />
          <line x1="40" y1="25" x2="90" y2="25" stroke-width="8" stroke="currentColor" />
          <line x1="40" y1="50" x2="80" y2="50" stroke-width="8" stroke="currentColor" />
          <line x1="40" y1="75" x2="90" y2="75" stroke-width="8" stroke="currentColor" />
        </symbol>
      </defs>
    </svg>
    

  • 项目中设置svg标签宽高，通过use标签的href属性获取对应模块中svg标签内容

      <svg width="30" hieght="30" style="color: pink;">
        <use href="#more"></use>
      </svg>
    

  • 在实际应用过程中use标签会被替换为g标签

  • 使用iconfont中的图标

    • iconfont创建新项目，选择symbol，上传本地svg图片，选择去除所有颜色并保存
    • 生成在线链接
    • 在项目的index.html中引入该链接

        <script src="//at.alicdn.com/t/font_2597854_yzagczj1tpf.js"></script>
      

    • 修改样式，写入以下示例代码

        .iconfont{
          font-family:"iconfont" !important;
          font-size:16px;font-style:normal;
          -webkit-font-smoothing: antialiased;
          -webkit-text-stroke-width: 0.2px;
          -moz-osx-font-smoothing: grayscale;
        }
      

• css3样式

  • 过渡动画
  • 补间动画