如何使用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
相关产品推荐
相关产品推荐

