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
  }
})
}
相关推荐
高山我梦口香糖17 分钟前
[electron]预脚本不显示内联script
前端·javascript·electron
神探小白牙17 分钟前
vue-video-player视频保活成功确无法推送问题
前端·vue.js·音视频
Angel_girl3191 小时前
vue项目使用svg图标
前端·vue.js
難釋懷1 小时前
vue 项目中常用的 2 个 Ajax 库
前端·vue.js·ajax
Qian Xiaoo1 小时前
Ajax入门
前端·ajax·okhttp
爱生活的苏苏2 小时前
vue生成二维码图片+文字说明
前端·vue.js
拉不动的猪2 小时前
安卓和ios小程序开发中的兼容性问题举例
前端·javascript·面试
炫彩@之星2 小时前
Chrome书签的导出与导入:步骤图
前端·chrome
贩卖纯净水.2 小时前
浏览器兼容-polyfill-本地服务-优化
开发语言·前端·javascript
前端百草阁2 小时前
从npm库 Vue 组件到独立SDK:打包与 CDN 引入的最佳实践
前端·vue.js·npm