目录
- 手摸手6-创建前端应用
- 简介
- 命令 npm create vue 和 npm init vue@3的区别
- 使用 Create-Vue 创建应用
- 1、输入命令 npm create vue 创建应用
- 2、输入命令 npm install 安装相关依赖
- 3、输入命令 npm run dev 运行项目
- 项目结构
手摸手6-创建前端应用
简介
create-vue 是 vue 应用程序的脚手架工具。它取代了 vue cli，成为创建 vue spa（单页应用程序）的推荐方式
命令 npm create vue 和 npm init vue@3的区别
npm create vue 和 npm init vue@3 都是用于创建 Vue.js 项目的命令，但在用法和背后的实现上有一些区别。
-
npm create vue:- 这是一个较新的方式，
npm create是一个通用的命令，可以用于创建许多不同类型的项目。它会自动使用预设的脚手架工具来生成项目。 - 此命令通常会根据用户的输入选择合适的版本。通常，它会使用最新版本的 Vue（目前是 3.x）。
- 这是一个较新的方式，
-
npm init vue@3:- 这个命令则是直接指定想要使用 Vue 的 3.x 版本。这适合那些明确要创建特定版本的 Vue 项目的开发者。
- 它会引导您通过项目创建流程，询问一些设置选项，比如项目名称、版本、描述等等。
总结来说，二者都可以用来创建 Vue 项目，但 npm create vue 可以被看作是更为简化的方式，而 npm init vue@3 明确指定了要使用 Vue 的 3.x 版本。如果你不确定使用哪个，推荐使用 npm create vue，因为它会自动为你选择最新的稳定版本。如果你对版本有特别的要求，则可以选择后者。
这里我们使用 npm create vue 创建应用
使用 Create-Vue 创建应用
首先，确保安装了 Node.js 和 npm。您可以通过运行 npm -v 来检查：
1、输入命令 npm create vue 创建应用
根据自己的需要来选择对应的项目，Vue Router、ESLint 和 Prettier 选择 yes，其余选择 no
2、输入命令 npm install 安装相关依赖
进入到项目文件夹下，执行命令
3、输入命令 npm run dev 运行项目
生成的链接，ctrl+单击链接进入到项目页面
页面显示如下，创建 vue项目成功
项目结构
ojmall-ui/
├── public/ # 静态文件目录
│ ├── favicon.ico # 网站图标
│ └── index.html # 入口 HTML 文件
├── src/ # 源代码目录
│ ├── assets/ # 静态资源（图片、样式等）
│ ├── components/ # Vue 组件
│ ├── views/ # 页面视图
│ ├── router/ # 路由配置
│ ├── store/ # Vuex 状态管理
│ ├── App.vue # 根组件
│ └── main.js # 入口 JavaScript 文件
├── package.json # 项目配置文件
└── README.md # 项目说明文件
