前提

已经装了 bash 命令行
vue 开发环境以及 vue3

背景

vue3 稳定版已经发布一段时间了，vue3+ts的开发模式能大大提升vue项目的维护性和稳定性。
故这里尝试下使用vue cli 快速创建vue3+ts 的项目。

平时用 git bash 比较多，但是直接在命令窗口中使用vue create <项目名>后出现的选择项，选择不了。
网上说window 系统需要使用winpty vue.cmd create <项目名> 来创建项目，当出现选择项时使用上下箭头切换选择即可，按下回车键表示确认。

新建项目

我的配置如下：

可以看到我们保存了一个名为vue3_ts_basics的模板，这个文件被保存在了C:\Users\Lenovo\.vuerc，不同厂商这里的地址可能不一样。

打开该文件后将presets.vue3_ts_basics对应的值取出，并放到工作目录（我的目录是D:\work\vue3）且我们命名为vue3_ts_basics.json

{"useConfigFiles": true,"plugins": {"@vue/cli-plugin-babel": {},"@vue/cli-plugin-typescript": {"classComponent": false,"useTsWithBabel": true},"@vue/cli-plugin-router": {"historyMode": false},"@vue/cli-plugin-vuex": {},"@vue/cli-plugin-eslint": {"config": "airbnb","lintOn": ["save","commit"]}},"vueVersion": "3"
}

后续我们在该工作目录（我的目录是D:\work\vue3）下想快速创建基于该模板的项目，可直接在该工作目录下使用命令
vue create --preset vue3_ts_basic.json <项目名称> 创建项目。

更多关于vue preset 的介绍请查看官方文档 vue preset 介绍

end

window系统使用 bash 新建 vue3+ts 项目以及 preset 模板使用相关推荐

使用Vite创建Vue3+TS项目并整合Element Plus框架等一条龙服务
记录一下使用Vite创建Vue3+TS项目以及整合Element Plus框架,还有Less.Pinia.Vue-router.monaco-editor等插件或组件. 一.使用Vite创建Vue3+ ...
使用vue-cli创建vue3+ts项目
使用vue-cli创建vue3+ts项目提示:该文章为vue3+ts的!该文章是博主看的B站尚硅谷视频课来进行整理的!尚硅谷的课真的很不错! 文章目录使用vue-cli创建vue3+ts项目前言 ...
用vite创建 vue3 ts项目
先看看vite官网这都2022年了,你肯定玩过vite + vue3 + ts项目吧原先都是其他同事创建好项目,我直接上手这次我自己来创建一下,在这里做一下记录可以直接跟着官方教程走 http ...
vue3+ts+vite后台管理模板
vue3+ts+vite后台管理模板支持前后端控制权限,使用uniapp+vue3+ts+elementplus+vite开发,码云地址:https://gitee.com/yongqiang062 ...
vue3+ts+pinia智慧党建模板
这里写自定义目录标题 vue3+ts+pinia 智慧门户模板 vue3+ts+pinia 智慧门户模板智慧党建模板,组织工作, "党员教育", "思想理论&q ...
vite+vue3+ts项目搭建之集成qiankun让其成为子应用模板(vite+vue3+ts+qiankun项目)—新增主应用在线地址可以进入vue2/vue3子应用
前言以下操作,是续接之前第四步 --即:vite+vue3+ts+pinia+element-plus项目已完成搭建好,可以直接业务开发了主应用技术栈:vue2+webpack+js 集成qia ...
vite+vue3+TS项目引入antd-vue的问题记录
文章目录 1.vite创建的vue+TS项目引入antd-vue 2.antd-vue定制主题报错记录博,用于记录Vue3项目中遇到的问题 1.vite创建的vue+TS项目引入antd-vue 由 ...
WIN10系统上，新建AliOS Things项目
全局掌控确定新项目的目录用VSCode新建项目重新打开SDK目录简单修改新项目的模板编译,烧写,查看结果 AliOS Things 的Yloop调度新项目的目录我们将从Git上面下载的源 ...
vite+vue3+ts项目插件使用（提高开发效率vite+vue3插件使用）新增在线预览地址
在线预览 Link:https://wocwin.github.io/wocwin-admin/ 一.@vitejs/plugin-vue-jsx vite+vue3项目全面支持jsx语法 npm i ...

window系统使用 bash 新建 vue3+ts 项目以及 preset 模板使用

前提

背景

新建项目

window系统使用 bash 新建 vue3+ts 项目以及 preset 模板使用相关推荐

最新文章

热门文章