You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何使用Vue-CLI创建带自定义默认模板的Vue项目?

Vue-CLI自定义项目模板配置方案

完全可以通过Vue-CLI的预设和自定义模板能力实现你的需求,以下是两种常用的实现方案:

方案1:本地/全局预设(Preset)

适合固定依赖和项目配置的场景,配置完成后可以直接复用创建规则:

  • 首先手动初始化一个基础Vue项目,按照你的需求完成所有初始配置:安装好Axios、Vue-Router、Vuex以及你的业务特定依赖,删除默认的HelloWorld.vue组件,替换为你的自定义组件、品牌标识、静态资源、全局样式等,调整到你需要的初始项目结构状态。
  • 在项目根目录下创建自定义预设配置文件preset.json,示例配置如下:
{
  "useConfigFiles": true,
  "vueVersion": "2", // 填写你需要的Vue版本,也可以填3
  "plugins": {
    "@vue/cli-plugin-babel": {},
    "@vue/cli-plugin-eslint": {
      "config": "standard",
      "lintOn": ["save"]
    },
    "@vue/cli-plugin-router": {
      "historyMode": true // 按你的需求配置是否用history模式
    },
    "@vue/cli-plugin-vuex": {}
  },
  "dependencies": {
    "axios": "^1.6.0",
    "你的业务依赖包": "^对应版本号"
  }
}
  • 单次使用自定义预设创建项目,执行命令:vue create --preset ./path/to/your/preset.json 新项目名
  • 要全局复用的话,把上述预设配置添加到你本地用户目录下的.vuerc文件的presets字段中,之后每次执行vue create命令时,就可以在预设选择列表里直接选你自定义的预设。

方案2:自定义远程Git模板(灵活度更高)

适合需要完全自定义项目结构、多场景切换模板的场景:

  • 把你已经调整好所有初始配置的基准项目,推送到本地或远程Git仓库,注意把node_modules、.git、本地环境配置等无关文件加入.gitignore。
  • 拉取模板创建新项目执行命令:vue create -p 你的Git仓库地址 新项目名
  • 可以自定义命令别名简化操作:Mac/Linux系统在~/.zshrc或~/.bashrc中添加alias vue-create-custom="vue create -p 你的Git仓库地址",Windows系统在PowerShell配置文件中添加对应别名,之后直接执行vue-create-custom 新项目名即可一键生成符合要求的项目。

补充说明:如果需要在创建项目时交互式选择功能、动态调整配置,可以在模板仓库根目录添加prompts.js文件定义交互规则,模板文件中支持EJS语法注入动态变量,Vue-CLI创建项目时会自动完成变量替换。

内容的提问来源于stack exchange,提问作者Yasin Demirkaya

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.06 07:57:04