vue3 + vite常用工具

1. plop

1.1 安装

javascript 复制代码
yarn add plop -D

1.2 使用

1.2.1 package.json 配置脚本命令

javascript 复制代码
  "scripts": {
    "dev": "vite --mode dev",
    "build": "vue-tsc --noEmit && vite build",
    "serve": "vite preview",
    "p": "plop"
  },

1.2.2 在主目录新建文件 plopfile.js

javascript 复制代码
module.exports = function (plop) {
  plop.setGenerator('view', {
  description: '创建模块vue模板',
  prompts: [
    {
      type: 'input',
      name: 'path',
      message: '请输入路径',
      default: 'views'
    },
    {
      type: 'input',
      name: 'name',
      message: '请输入模块名称'
    }
  ],
  actions: (data) => {
    const { name, path } = data
    const upperFirstName = toUpperCase(name)

    const actions = []
    if (name) {
      actions.push({
        type: 'add',
        path: `./src/${path}/${upperFirstName}.vue`,
        templateFile: './plop/view/view.hbs',
        data: {
          name,
          upperFirstName
        }
      })
    }

    return actions
  }
})
}
相关推荐
阿芯爱编程29 分钟前
最长和谐子序列,滑动窗口
前端·javascript·面试
你脸上有BUG1 小时前
Css实现悬浮对角线边框动效
前端·css·动画
烛阴1 小时前
开发者神器:如何在浏览器控制台玩转第三方库,让调试效率翻倍!
前端·javascript
crary,记忆1 小时前
Module Federation 和 Native Federation 的比较
前端·webpack·angular
why技术1 小时前
翻译翻译,什么叫“编程专用”的显示器?
前端·后端
拉不动的猪2 小时前
JQ常规面试题
前端·javascript·面试
海上彼尚2 小时前
Monorepo + PNPM 搭建高效多项目管理
前端·js·源代码管理
Random_index2 小时前
#Uniapp篇:chrome调试&&unapp适配
前端·chrome·uni-app
新中地GIS开发老师3 小时前
三维GIS开发cesium智慧地铁教程(5)Cesium相机控制
javascript·arcgis·智慧城市·大学生·gis开发·webgis·地理信息科学