zhuangjie
ZhuangJie

1、安装好对应的node版本,vue3使用18+
2、配置镜像加速,`npm config set registry https://mirrors.huaweicloud.com/repository/npm/`
3、安装@vue/cli,就可以使用vue create创建vue项目了
4、使用vue create XXX 按里面的步骤创建vue项目


后面创建新的vue项目只需要执行第4步
1、使用资源管理器打开要存放项目的目录
2、进入该目录的命令行,上面输入cmd回车
3、执行创建vue项目 vue create XXX


Vue CLI v5.0.8
? Please pick a preset:
> vue3-demo ([Vue 3] babel, router, vuex, eslint) 之前保存为历史 了
Default ([Vue 3] babel, eslint) 想要快速创建vue3项目
Default ([Vue 2] babel, eslint) 想要快速创建vue3项目
Manually select features 自定义选择


为了更好的开发使用vscode编辑器对vue项目开发安装插件:
- Vue (Official)

eslint与自动格式化: 如果项目安装了eslint 对格式有要求(一点格式不对,即使代码没问题在启动时也会报错),可以自己配置项目eslint规则
1、ESLint (vscode插件)
2、配置自动格式化

.vscode
- settings.json
```json
{
// 只对常用语言开启保存后格式化
"editor.formatOnSave": false,
"[javascript]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},

// 限制格式化超时时间,避免卡顿
"editor.formatOnSaveTimeout": 5000,

// 保存时先运行 Prettier 格式化,再运行 ESLint 自动修复
"editor.codeActionsOnSave": {
"source.formatDocument": "explicit",
"source.fixAll.eslint": "explicit"
},

// 禁用其他可能与 Prettier 冲突的扩展或功能
"prettier.disableLanguages": ["markdown", "json"],
"prettier.requireConfig": true
}
```

posted on 2025-08-17 23:54  zhuangjie  阅读(98)  评论(0)    收藏  举报