vue3+typescript创建项目详细步骤

以下是使用 Vue 3 和 TypeScript 创建项目的详细步骤：

• 在本地计算机上选择一个合适的路径，新建一个文件夹作为项目根目录。

• 打开终端（Windows 用户使用 CMD 或 PowerShell，macOS/Linux 用户使用 Terminal），运行以下命令安装 Vue CLI：cnpm install -g @vue/cli # 或npm install -g @vue/cli

  如果已安装旧版本，建议先卸载旧版：npm uninstall -g @vue/cli。

• 在终端中导航到项目文件夹，运行以下命令：vue create 项目名称

  将 项目名称 替换为实际的名称（如 my-vue3-ts-project），名称需符合 npm 包命名规范（仅支持小写字母、数字和连字符）。

• 选择配置方式：在交互界面中，选择 Manually select features（手动选择特性），以便自由配置项目。

• 选择特性：使用空格键勾选以下特性（根据需求调整）：

  TypeScript：启用 TypeScript 支持。

  Babel：适配 JavaScript 新特性。

  Router：添加 Vue Router（如需路由功能）。

  CSS Pre-processors：支持 Less/Sass 等 CSS 预处理器（按需选择）。

  Linter / Formatter：代码规范校验（如 ESLint）。

  Class-style component syntax：启用类组件风格（类似 React）。

  

• 跳过测试框架：不选择自动化测试框架（如 Unit Testing 或 E2E Testing）。

• 启用类组件：选择 Y 启用类组件语法（可选）。

• 配置 Babel 转义：确保启用 Babel 对 TypeScript 和 JSX 的转义。

• 路由模式：选择路由模式（Y 为 HTML5 History 模式，N 为 Hash 模式）。

• CSS 预处理器：根据习惯选择 Less/Sass/Stylus（如选择 Sass，需后续安装 sass-loader 和 node-sass）。

• 代码风格校验：选择 ESLint 配置（如 Standard 或 Prettier），并配置校验时机：

  Lint on save：保存时校验。

  Lint and fix on commit：提交时校验并修复。

• 配置文件存放位置：选择 In dedicated config files（独立配置文件）或 In package.json（合并到 package.json）。

• 保存预设：选择 N 不保存当前配置为模板（除非需复用）。

• Vue CLI 会自动安装依赖并生成项目结构，完成后终端会显示成功信息。

• 进入项目目录并启动开发服务器：cd 项目名称npm run serve
• 浏览器访问
  http://localhost:8080
  即可查看项目。

• 安装 Sass/Less：若选择了 CSS 预处理器，需额外安装依赖：npm install sass sass-loader --save-dev # Sass# 或npm install less less-loader --save-dev # Less
• 配置 Vue Router：在 src/router/index.ts 中修改路由规则。
• 添加 Vuex：如需状态管理，运行 vue add vuex。

• Node.js 版本：确保使用 Node.js 14+ 和 npm 6+。
• TypeScript 支持：项目默认生成 shims-vue.d.ts 文件，无需手动配置 .vue 文件的 TypeScript 类型。
• 依赖冲突：若使用 cnpm 安装依赖，建议后续改用 npm 或 yarn 避免潜在问题。

通过以上步骤，即可快速创建一个基于 Vue 3 和 TypeScript 的项目框架。