Element3开发内幕 - Vue CLI插件开发

简介: Element3开发内幕 - Vue CLI插件开发

Element3开发内幕 - Vue CLI插件开发


官方开发指南 cli.vuejs.org/zh/dev-guid…


我们团队的Element发布了。为了让大家使用起来便捷。需要加入vue-cli和vite生态之中。


今天先说说vue-cli插件如何开发。


大家可以尝试一下先


vue create vue3-demo
vue add element3


网络异常,图片无法展示
|


一、什么是Vue CLI插件


Vue CLI工具是Vue生态在Vue生态中负责工具基础标准化。他使用一套基于插件的架构。


比如vue-router、vuex或者安装组件库等都可以通过插件的形式安装。


vue add 的设计意图是为了安装和调用 Vue CLI 插件。


# 插件安装
vue add vuex


一个vue add xxx就搞定了。


二、功能实现


1. 搭建框架


1.1 初始npm库


为了让一个 CLI 插件在 Vue CLI 项目中被正常使用,它必须遵循 vue-cli-plugin-<name> 或者 @scope/vue-cli-plugin-<name> 这样的命名惯例。这样你的插件才能够:


  • @vue/cli-service 发现;


也就是说我们只需要将npm库的名字命名为 vue-cli-plugin-element3


这样只要最后提交到npm仓库后 ,我们通过


vue add element3


就可以安装插件了


mkdir vue-cli-plugin-element3
npm init -y


网络异常,图片无法展示
|


2. 安装配置命令行交互


在安装插件前通常会通过命令行交互形式,选择一下安装参数:


比如Element中需要询问


  • 是否全局安装


网络异常,图片无法展示
|


  • 是否使用sass?


网络异常,图片无法展示
|


这个功能是使用通过 inquirer 实现。其实你自己写一个cli工具一般也会用这个功能

在这里面我们只需要编辑一下 prompts.js文件就可以了。具体配置可以参考 inquirer


module.exports = [
  {
    type: 'list',
    name: 'import',
    message: 'How do you want to import Element3?',
    choices: [
      { name: 'Fully import', value: 'full' },
      { name: 'Import on demand', value: 'partial' }
    ],
    default: 'full',
  },
  {
    when: answers => answers.import === 'full',
    type: 'confirm',
    name: 'customTheme',
    message: 'Do you wish to overwrite Element\'s SCSS variables?',
    default: false,
  },
]


3. 代码生成器Generator


添加element3组件库的主要功能集中在生成器上。生成器的作用就是


  • 修改已有代码


  • 添加代码


  • 添加依赖


  • 其他功能(比如babel配置)


如果手工添加Element3库大概需要以下步骤:


  • npm添加依赖库


  • 以vue plugin形式添加组件库


  • main.js引用组件库


  • App.vue中写一个代码例子 比如: 引用一个按钮 确认安装效果


网络异常,图片无法展示
|


3.1 添加依赖


module.exports = (api, opts, rootOptions) => {
 api.extendPackage({
  dependencies: {
    'element3': '^0.0.26'
  }
})
}


这个功能其实就是调用cli提供的api就可以实现了。


3.2 添加插件


添加插件的过程其实就是需要添加/plugins/element.js文件


生成代码通常会使用模板引擎渲染方式,过程类似后端代码渲染,常用的库有ejs模板和hbs模板


cli工具中要求我们使用ejs模板。


如果想了解模板引擎实现原理 请看这篇【天天造轮子 - 模板引擎】]

(juejin.cn/post/688413…)


首先定义模板


// 部分节选
<%_ if (options.import === 'full') { _%>
import Element3 from 'element3'
<%_ if (options.customTheme) { _%>
import '../element-variables.scss'
<%_ } else { _%>
import 'element3/lib/theme-chalk/index.css'
<%_ } _%> 
<%_ if (options.lang !== 'en') { _%>
import locale from 'element3/lib/locale/lang/<%= options.lang %>'
<%_ } _%>
<%_ } else { _%>
import { ElButton } from 'element3'
import 'element3/lib/theme-chalk/index.css'
<%_ if (options.lang !== 'en') { _%>
import lang from 'element3/lib/locale/lang/<%= options.lang %>'
import locale from 'element3/lib/locale'
<%_ }} _%>
export default (app) => {
  <%_ if (options.import === 'full') { _%>
  <%_ if (options.lang !== 'en') { _%>
  app.use(Element3, { locale })
  <%_ } else { _%>
  app.use(Element3)
  <%_ } _%>
  <%_ } else { _%>
  <%_ if (options.lang !== 'en') { _%>
  locale.use(lang)
  <%_ } _%>
  app.use(ElButton)
  <%_ } _%>
}


调用模板引擎渲染


这里面还是使用api提供的render方法 其实就是ejs模板引擎


api.render({
    './src/plugins/element.js': './templates/src/plugins/element.js.ejs',
  })


3.3 添加插件引用


添加插件引用相当于在main.js文件中增加内容


网络异常,图片无法展示
|


这个程序逻辑比较简单 ,只需要通过简单的文件操作+正则就可以完成。


如果是复杂功能还需要借助AST抽象语法树完成。这个后续章节有介绍。


api.afterInvoke(() => {
    const { EOL } = require('os')
    const fs = require('fs')
    const contentMain = fs.readFileSync(api.resolve(api.entryFile), { encoding: 'utf-8' })
    const lines = contentMain.split(/\r?\n/g)
    const renderIndex = lines.findIndex(line => line.match(/createApp\(App\)\.mount\('#app'\)/))
    lines[renderIndex] = `const app = createApp(App)`
    lines[renderIndex + 1] = `installElement3(app)`
    lines[renderIndex + 2] = `app.mount('#app')`
    fs.writeFileSync(api.resolve(api.entryFile), lines.join(EOL), { encoding: 'utf-8' })
  })


3.4 添加代码示例


这个功能还是通过代码模板渲染代码。


<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div>
      <p>
        If Element3 is successfully added to this project, you'll see an
        <code v-text="'<el-button>'"></code>
        below
      </p>
      <el-button type="primary">el-button</el-button>
    </div>
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>


api.render({
    './src/App.vue': './templates/src/App.vue.ejs'
})


4. Service处理


service的会在启动服务时运行。我们这里就小小的秀一下Logo。


网络异常,图片无法展示
|


我们使用figlet + chalk完成


const figlet = require('figlet')
const chalk = require('chalk')
module.exports = () => {
    console.log(chalk.yellow(figlet.textSync('Element 3', {
        font: 'big',
        horizontalLayout: 'default',
        verticalLayout: 'default',
        width: 80,
        whitespaceBreak: true
    })));
}


三、本地调试


在没有上传npm前需要,本地安装,方法如下:


# 再次安装依赖
yarn
npm install --save-dev file:/Users/xiaran/source/hug-sun/vue-cli-plugin-element3
vue invoke vue-cli-plugin-element3


四、上传npm仓库


上传仓库就是执行npm publish就行了。只不过要注意需要更改镜像仓库。上传完后再改回来。


#!/usr/bin/env bash
npm config get registry # 检查仓库镜像库
npm config set registry=http://registry.npmjs.org
echo '请进行登录相关操作:'
npm login # 登陆
echo "-------publishing-------"
npm publish # 发布
npm config set registry=https://registry.npm.taobao.org # 设置为淘宝镜像
echo "发布完成"
exit


网络异常,图片无法展示
|



作者:全栈然叔

链接:https://juejin.cn/post/6899334776860180494

来源:稀土掘金

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

相关文章
|
8天前
|
JavaScript 前端开发 开发者
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
|
8天前
|
移动开发 JavaScript API
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
|
8天前
|
JavaScript 前端开发 数据安全/隐私保护
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
|
11天前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
57 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
12天前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
66 12
|
缓存 资源调度 JavaScript
Vue——安装@vue/cli(Vue脚手架)的三种方式
安装@vue/cli(Vue脚手架)的三种方式
239 0
|
Web App开发 JavaScript 前端开发
【Vue五分钟】 Vue Cli脚手架安装配置
这个脚手架是一个基于Vue快速进行的开发的完成系统;是基于webpack构建开发的,带有合理的配置,可以通过项目的文件进行配置。
【Vue五分钟】 Vue Cli脚手架安装配置
|
JavaScript 前端开发 Java
Vue CLI 脚手架
🍅程序员小王的博客:程序员小王的博客 🍅 欢迎点赞 👍 收藏 ⭐留言 📝 🍅 如有编辑错误联系作者,如果有比较好的文章欢迎分享给我,我会取其精华去其糟粕 🍅java自学的学习路线:java自学的学习路线
239 0
Vue CLI 脚手架
|
JavaScript 测试技术 开发工具
Vue CLI脚手架
Vue CLI脚手架
347 0
Vue CLI脚手架
|
29天前
|
JavaScript 安全 API
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
61 8

热门文章

最新文章