创建vue项目

步骤一：输入项目创建命令

命令：vue create 项目名称

项目名称不要包含中文或大写字母，否则会创建失败

这里项目名称为“new-vue-project”

步骤二：选择项目模板

Vue 3官方模板：Default ([Vue 3] babel, eslint)

Vue 3官方模板：Default ([Vue 2] babel, eslint)

自定义模板：Manually select features

这里选择Manually select features

除了官方模板和自定义模板外，还可以选择保存好的模板

步骤三：选择一些配置

Babel // 转码器，可以将ES6代码转为ES5代码，从而适应低版本的浏览器。

TypeScript // JavaScript的超集，包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行

Progressive Web App (PWA) Support // 渐进式Web应用程序

Router // vue-router（vue路由）

Vuex // vuex（vue的状态管理模式）

CSS Pre-processors // CSS 预处理器（如：less、sass）

Linter / Formatter // 代码风格检查和格式化（如：ESlint）

Unit Testing // 单元测试（unit tests）

E2E Testing // e2e（end to end） 测试

这里把括号里有星号的都选上了

步骤四：选择vue版本号

这里选择3.x

步骤五：进一步选择一些配置

Use class-style component syntax? (y/N)

是否使用类样式组件语法？（是/否）

这里选择：N

Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)

与TypeScript一起使用Babel（现代模式、自动检测的polyfills、传输JSX所需）？（是/否）

这里选择：n

Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

对路由器使用历史记录模式？（需要为生产中的索引回退进行正确的服务器设置）（是/否）

这里选择：Y

Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):

选择CSS预处理器（默认情况下支持PostCSS、Autoprefixer和CSS模块）：

Sass/SCSS (with dart-sass)

Less

Stylus

这里选择：Less

Pick a linter / formatter config: (Use arrow keys)

选择linter/formater配置：（使用箭头键）

ESLint with error prevention only

ESLint（仅具有错误预防功能）

ESLint + Airbnb config

ESLint+Airbnb (不太懂)

ESLint + Standard config

ESLint+Standard config（标准配置）

ESLint + Prettier

ESLint+Pretier（严格配置）

这里选择：ESLint + Standard config

这个配置项选择不同的，直接选了：Lint on save

Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)

您希望将Babel、ESLint等的配置放在哪里。？（使用箭头键）

In dedicated config files

在专用配置文件中

In package.json

在package.json中

这里选择：In dedicated config files

Save this as a preset for future projects? (y/N)

是否将其保存为未来项目的预设？

这里选择：N

配置选择完成

vue项目创建完成

代码风格检查和格式化可能会让人抓狂——尤其是ESLint+Pretier（严格配置），这个问题可以用ESLint插件来解决

---

vscode 安装 eslint 插件

步骤一：在 vscode 中搜索并安装 ESLint 插件

已安装：

步骤二：配置 ESLint 插件

至此，问题解决！