Vue 2，Vue3 项目快速搭建,付实战项目源码下载

Vue 2 项目快速搭建

1. 环境准备

安装 Node.js 和 npm

• 访问 Node.js 官网 下载并安装最新版的 Node.js。安装完成后，Node.js 会附带 npm。
• 安装完成后，在终端或命令行中运行以下命令来检查安装是否成功：

  node -v
  npm -v
  

安装 Vue CLI

• 在终端或命令行中运行以下命令全局安装 Vue CLI：

  npm install -g @vue/cli
  

2. 创建 Vue 2 项目

使用 Vue CLI 创建项目

• 在你希望创建项目的目录中，运行以下命令：

  vue create my-vue2-project
  

  将 my-vue2-project 替换为你的项目名称。

• 在创建过程中，会出现一些选项。选择 “Manually select features”（手动选择特性）：

  • Babel: 支持 ES6+
  • Linter / Formatter: 代码风格检查和格式化工具（可选）
  • Vuex: 状态管理（可选）
  • Router: 路由管理（可选）

• 在选择特性时，确保 Babel 被选中，然后选择 “Vue 2” 作为 Vue 版本。如果没有提供选项，默认安装的是 Vue 3。

3. 进入项目并启动

• 进入项目目录：

  cd my-vue2-project
  

• 启动开发服务器：

  npm run serve
  

• 在浏览器中访问 http://localhost:8080 来预览你的 Vue 2 应用。

Vue 3 项目快速搭建

1. 环境准备

安装 Node.js 和 npm

• 和 Vue 2 项目相同，确保你已经安装了 Node.js 和 npm。

安装 Vue CLI（可选）

• Vue 3 项目也可以使用 Vue CLI，但 Vue 3 项目也可以使用新的脚手架工具 create-vue。
• 如果你已经安装了 Vue CLI，可以跳过此步骤。如果未安装，可以运行：

  npm install -g @vue/cli
  

2. 创建 Vue 3 项目

使用 create-vue 创建项目

• 在你希望创建项目的目录中，运行以下命令：

  npm init vue@latest
  

  或者如果你安装了 pnpm：

  pnpm create vue
  

• 按照提示选择项目配置：

  • Project name: 输入项目名称。
  • Add TypeScript?: 选择是否使用 TypeScript（可选）。
  • Add JSX Support?: 选择是否使用 JSX（可选）。
  • Add Vue Router for Single Page Application development?: 是否添加 Vue Router（可选）。
  • Add Pinia for state management?: 是否添加 Pinia 状态管理（推荐用于 Vue 3）。
  • Add a component library?: 选择是否添加组件库（如 Vuetify）。

使用 Vue CLI 创建 Vue 3 项目

• 在你希望创建项目的目录中，运行以下命令：

  vue create my-vue3-project
  

• 在创建过程中，选择 “Manually select features”（手动选择特性）：

  • 选择 Babel 和 Linter / Formatter。
  • 选择 Router（如果你需要路由功能）。
  • 选择 Vuex（如果你需要状态管理）。
  • 选择 TypeScript 或其他你需要的功能。
  • 确保选择 Vue 3 作为 Vue 版本。

3. 进入项目并启动

• 进入项目目录：

  cd my-vue3-project
  

• 安装依赖（如果使用 create-vue）：

  npm install
  

• 启动开发服务器：

  npm run dev
  

• 在浏览器中访问 http://localhost:5173（如果使用 create-vue，端口可能不同）或 http://localhost:8080（如果使用 Vue CLI）来预览你的 Vue 3 应用。

总结

1. 安装 Node.js 和 npm，然后安装 Vue CLI（可选）。
2. 使用 vue create 或 npm init vue 脚手架工具创建项目。
3. 根据需要选择配置，然后启动开发服务器。

这样，你就可以快速搭建一个 Vue 2 或 Vue 3 项目，开始进行开发了。如果有更多特定需求或问题，可以进一步调整项目配置。

项目地址https://download.csdn.net/download/Kekekekekekeke11/89571802?spm=1001.2014.3001.5503: