Day 5---vue2 从0开始 写一个前端框架

项目背景：vue2

业务需求：用Vue+Element 写一个前端框架

今日主线任务：简单的封装一个全局组件

项目地址：

https://gitee.com/whwbs/my_project.git

---

组件化的基本思路在项目中十分必要,本人经历的所有前端项目,不论何种技术,都会用将高复用性的功能封装成组件,所以开始吧

准备工作：

1.阿里巴巴矢量图标库中下一个svg文件,利用它封装一个svg公共组件并在项目中使用.

2.npm install --save-dev svg-sprite-loader

1.全局配置 svg-sprite-loader

1.src/assets/svg-icons/icons 在这里存放我们准备好的svg文件,一般的静态文件比如图片放/src/assets下,原因可以去阅读d2-admin的文件结构这部分内容.

2.vue.config.js文件中将地址配置进去(全部代码),这里注意svg文件位置和symbolId的前缀命名

const path = require('path')
const resolve = dir => require('path').join(__dirname, dir)

module.exports = {
  chainWebpack: config => {
    config.plugins.delete('preload') // TODO: need test
    // set svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/assets/svg-icons/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/svg-icons/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'pr-[name]'
      })
      .end()
  }
}

3.新建 src/assets/svg-icons/index.js文件 将svg使用webpack api将svg文件获取到并且自动导入(全部代码)

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./icons', false, /\.svg$/) // 通过该函数可以获取一个上下文,从而实现工程自动化,即遍历文件夹的文件,从中获取指定文件,自动导入模块
requireAll(req)

2.在src/components 目录下写公共组件内容并且全局注册

1.新建src/components/pr-icon-svg/index.vue 文件,注意看#pr-${this.name} 前缀

<!--
 * @Description: svg公共组件
 * @Author: Walis
 * @Date: 2022-12-30 10:29:24
 * @LastEditors: Walis
 * @LastEditTime: 2022-12-30 10:52:49
-->
<template>
  <svg aria-hidden="true">
    <use :xlink:href="icon"></use>
  </svg>
</template>

<script>
export default {
  name: 'pr-icon-svg',
  props: {
    name: {
      type: String,
      required: true
    }
  },
  computed: {
    icon () {
      return `#pr-${this.name}`
    }
  }
}
</script>

2.新建 src/components/index.js 文件 作为公共组件全局注册文件 以后所有的组件都要在这里注册

/*
 * @Description: 公共组件全局注册文件
 * @Author: Walis
 * @Date: 2022-12-29 11:38:57
 * @LastEditors: Walis
 * @LastEditTime: 2022-12-30 11:52:50
 */
import Vue from 'vue'

Vue.component('pr-icon-svg', () => import('./pr-icon-svg/index.vue')) // svg

3.将公共组件作为核心插件最终引入到main.js文件中,这里参考了d2-admin 里的文件结构,也可以直接在main.js直接写,小型项目无所谓.

新建 src/plugin/pr/index.js文件 该文件是个核心插件注册文件,类似于一个桥接文件,目的感觉是为了让一些插件被归类起来,避免直接注册到main.js中导致文件杂糅.

/*
 * @Description: 核心插件配置文件
 * @Author: Walis
 * @Date: 2022-12-29 11:38:57
 * @LastEditors: Walis
 * @LastEditTime: 2022-12-30 11:53:27
 */

import '@/components' // 公共组件
import '@/assets/svg-icons' // svg 图标
import 'flex.css' // 弹性布局

export default {
  async install (Vue) {
    // 设置为 false 以阻止 vue 在启动时生成生产提示
    // https://cn.vuejs.org/v2/api/#productionTip
    Vue.config.productionTip = false
  }
}

import '@/components' // 公共组件 这一行代码就是把所有的公共组件引入到这里了,然后将这个文件作为一个过渡文件最终引入了main.js,

注:这里将flex.css从main.js挪出来放在这里.

/src/main.js中

// 核心插件
import Pr from '@/plugin/pr'
Vue.use(Pr);

到这一步,配置就完成了,因为更改了配置文件 需要重新启动项目,我们先在首页引用刚刚封装好的svg公共组件 

在 src/views/system/index/index.vue 文件中使用

 <pr-icon-svg name="logo"
style="width:50px;height:50px" />

 另外 在首页还简单的使用了布局组件,可以自行做一些页面的布局,主要还是顶部工具栏,左侧菜单栏以及主体部分这样的方式,后续会出文章一步步进行下去.

以上整个组件封装分开两部分看,svg在vue项目中的使用,以及公共组件全局注册,可以先试着自己封装一个别的组件试试看,至于svg在vue项目中的使用可以参考一位大神的帖子,主动学习缩小差距

在vue项目中使用svg图标_FFF-X的博客-CSDN博客_vue使用svg图标

感谢这位大佬.