手摸手6-创建前端应用

目录

    • 手摸手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 vuenpm init vue@3 都是用于创建 Vue.js 项目的命令,但在用法和背后的实现上有一些区别。

  1. npm create vue:

    • 这是一个较新的方式,npm create 是一个通用的命令,可以用于创建许多不同类型的项目。它会自动使用预设的脚手架工具来生成项目。
    • 此命令通常会根据用户的输入选择合适的版本。通常,它会使用最新版本的 Vue(目前是 3.x)。
  2. 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 来检查:

image-20241119153519964

1、输入命令 npm create vue 创建应用

根据自己的需要来选择对应的项目,Vue Router、ESLint 和 Prettier 选择 yes,其余选择 no

image-20241119160050549

2、输入命令 npm install 安装相关依赖

进入到项目文件夹下,执行命令

image-20241119160345868

3、输入命令 npm run dev 运行项目

生成的链接,ctrl+单击链接进入到项目页面

image-20241119160954732

页面显示如下,创建 vue项目成功

image-20241119161129736

项目结构

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 # 项目说明文件

上一篇:mock.js:定义、应用场景、安装、配置、使用


下一篇:一款绘制3D架构图的在线神器:iCraft Editor