前端工程化创建模板的方式

2024-01-02 07:59:41

方式一：直接使用vscode插件或添加用户代码片段

安装vscode插件

在vscode中，搜索并安装"hbs"插件。该插件可以帮助您快速创建和编辑hbs模板。

添加用户代码片段

在vscode中，点击"文件"->"首选项"->"设置"，然后搜索"用户代码片段"。在弹出的对话框中，点击"新建片段"按钮，然后输入以下代码：

{
  "hbs": {
    "prefix": "hbs",
    "body": [
      "{{> header}}",
      "<main>",
      "  <h1>{{title}}</h1>",
      "  <p>{{content}}</p>",
      "</main>",
      "{{> footer}}"
    ],
    "description": "hbs模板"
  }
}

使用代码片段

在vscode中，打开一个新的hbs文件，然后输入"hbs"并按回车键。vscode将自动生成一个hbs模板，您可以根据需要对其进行编辑。

方式二：采用plop模板创建

安装plop

在终端中，运行以下命令安装plop：

npm install plop --save-dev

创建plopfile.js文件

在项目根目录下，创建一个名为"plopfile.js"的文件，并输入以下代码：

module.exports = function (plop) {
  plop.setGenerator('component', {
    description: '创建一个新的组件',
    prompts: [
      {
        type: 'input',
        name: 'name',
        message: '组件名称?'
      }
    ],
    actions: [
      {
        type: 'add',
        path: 'src/components/{{name}}/{{name}}.hbs',
        templateFile: 'plop-templates/component.hbs'
      },
      {
        type: 'add',
        path: 'src/components/{{name}}/{{name}}.js',
        templateFile: 'plop-templates/component.js'
      }
    ]
  });
};