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
  }
})
}
相关推荐
coding随想4 分钟前
JavaScript中的原始值包装类型:让基本类型也能“变身”对象
开发语言·javascript·ecmascript
zhangxingchao7 分钟前
Flutter入门:Flutter开发必备Dart基础
前端
佚名猫18 分钟前
vue3+vite+pnpm项目 使用monaco-editor常见问题
前端·vue3·vite·monacoeditor
满分观测网友z19 分钟前
vue的<router-link>的to里面的query和params的区别
前端·javascript·vue.js
BillKu21 分钟前
Vue3 + TypeSrcipt 防抖、防止重复点击实例
前端·javascript·vue.js
鱼樱前端22 分钟前
Vue3结合three和babylonjs实现3D数字展厅效果
前端·vue.js
Themberfue25 分钟前
Vue ⑥-路由
前端·javascript·vue.js
whatever who cares27 分钟前
React hook之useRef
前端·javascript·react.js
kooboo china.36 分钟前
Tailwind CSS 实战:基于 Kooboo 构建 AI 对话框页面(八):异步处理逻辑详解
前端·css·人工智能·编辑器·html·交互