初识Vue3(详细版:创建，启动vue 项目）

已于 2025-03-24 21:54:16 修改
阅读量3.3k 收藏 13
点赞数 26
CC 4.0 BY-SA版权
分类专栏： vue 文章标签： 前端 vue
于 2024-09-27 22:54:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74124657/article/details/142601041

目录

前言

Vue3简介

spring 和Vue3 区别

创建Vue3工程

1 使用vite 构建

准备工作

0 前提;安装好node.js(node.js作为JavaScript的运行环境）

1 打开终端，切换到桌面（或自己专门创建一个文件夹单独放置）

2 输入命令：npm get registry 

3 切换镜像: npm config set registry https://registry.npmmirror.com

为什么要使用这个镜像呢？

创建vue 工程

0 打开命令行，选择合适的路径下，创建（选做）

1 输入命令：npm create vue@latest

 2 给创建项目命名

3 暂时不做选择，直接回车

4  执行下面标示 的命令（选做）

5 可以在指定目录，看到创建的vue工程

6 在命令行 启动 vue 工程（选做）

使用Visual Studio Code启动vue3项目

步骤

1 点击文件，选择打开文件夹（桌面）

2 设置中文：

运行 vue工程

1 使用终端，通过命令启动

2 打开package,json 文件，点击调试

2 使用通过script标签引用vue3 .js文件方式创建

步骤

1  创建web工程 ，新建 html文件

2 复制官网中的代码

3 运行HTML文件，出现Hello vue!

小结

前言

本篇博客，是基于已经学习完 JavaScript、HTML 和 CSS 知识之后的内容

如果大家对这些还不是很熟悉，可以点击链接来检验你的知识水平，来发现自己的不足

Vue3简介

总而言之：Vue3 是一款用于构建用户界面的 JavaScript 框架。

 我们打开官网：https://cn.vuejs.org/guide/introduction

说到“框架”大家是不是很熟悉，在我们学习后端 过程中，我们常常称 spring  框架

spring 和Vue3 区别

1 作用的方向不同: spring 是基于后端的，做后端项目；Vue3 是基于前端的，做前端项目

2 构建工具不同：spring 是maven构建；Vue3可以使用多种方式创建

1  可以通过 Vite创建

打开vue官网：https://cn.vuejs.org/guide/quick-start.html

2 通过script标签引用vue3 .js文件方式创建

 打开vue官网：https://cn.vuejs.org/guide/quick-start.html

以上都是 通过引用js文件创建的，还有其它创建方式，大家可以查看vue官网

如下图所示使用  vue-cli创建

创建Vue3工程

本篇博客，我将讲述两种创建Vue3工程的方式

1 使用vite 构建

2 使用通过script标签引用vue3 .js文件方式创建

1 使用vite 构建

  • 全局使用vue【完全版本的vue 项目】

准备工作

0 前提;安装好node.js(node.js作为JavaScript的运行环境）

1 打开终端，切换到桌面（或自己专门创建一个文件夹单独放置）

原因：最终 会将创建的Vue工程以文件夹的方式，放置到桌面或你创建的文件夹中

2 输入命令：npm get registry 

原因:该命令是查看你的镜像，为下步我们切换镜像做准备

3 切换镜像: npm config set registry https://registry.npmmirror.com
为什么要使用这个镜像呢？

原因：使用淘宝镜像，面临淘宝镜像证书过期问题，不能满足创建项目的要求。

切换之后，可以输入之前的命令，查看是否切换成功

注意：如果已经切换为淘宝镜像，处理办法：

看我上一篇博客：面对淘宝镜像证书过期，npm怎么办？

链接：面对淘宝镜像证书过期，npm怎么办？_node淘宝镜像过期-CSDN博客

准备工作已经完成，现在开始正式通过命令行的方式，创建vue 工程

创建vue 工程

0 打开命令行，选择合适的路径下，创建（选做）

举例说明

我一般会将 创建好的vue 工程 放在 D盘的某个文件夹，因此会提前将 命令行中的路径跳转到D盘中去。

cd D:\GPT浏览器下载\vue项目

意思是切换到 该目录下

1 输入命令：npm create vue@latest

 2 给创建项目命名

命名要求：以英文组成，可有下划线，不要出现数字

如下图所示：

输入命令之后，会出现官网中我第二个框框，在终端中，是一条，一条的的出现，询问你是否需要这些配置。通过键盘的左右键选择 yes/no。如下图官网中一样

使用文心一言，翻译每行语句

这是一个典型的项目初始化或配置过程中的一系列选项，通常出现在使用脚手架工具（如 Vue CLI）创建新项目时。每个选项都是询问你是否想在你的项目中添加特定的功能或工具。下面是每个选项的详细解释：

  1. Project name: … <your-project-name>
    这里要求你输入你的项目名称。<your-project-name> 是一个占位符，你应该替换成你希望的项目名称。

  2. Add TypeScript? … No / Yes
    询问你是否想在你的项目中使用 TypeScript。TypeScript 是 JavaScript 的一个超集，添加了类型系统和一些其他特性，有助于在开发过程中捕捉错误和提高代码质量。

  3. Add JSX Support? … No / Yes
    询问你是否想在你的 Vue 项目中支持 JSX 语法。JSX 是一种 JavaScript 的 XML 语法扩展，允许你在 JavaScript 代码中写类似 HTML 的标记。Vue 默认使用模板语法，但也可以配置以支持 JSX。

  4. Add Vue Router for Single Page Application development? … No / Yes
    询问你是否想添加 Vue Router。Vue Router 是 Vue.js 官方的路由管理器，它与 Vue.js 深度集成，让构建单页面应用（SPA）变得易如反掌。

  5. Add Pinia for state management? … No / Yes
    询问你是否想使用 Pinia 进行状态管理。Pinia 是 Vue 的状态管理库，用于 Vue 3，是 Vuex 的后续替代品，提供了更简洁的 API 和更好的 TypeScript 支持。

  6. Add Vitest for Unit testing? … No / Yes
    询问你是否想添加 Vitest 用于单元测试。Vitest 是一个由 Vue.js 团队开发的测试框架，它提供了极快的测试速度和丰富的特性。

  7. Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
    询问你是否想添加端到端（E2E）测试解决方案。这里给出了几个选项：Cypress、Nightwatch 和 Playwright。这些工具用于模拟用户行为，从浏览器的角度测试整个应用的流程。

  8. Add ESLint for code quality? … No / Yes
    询问你是否想添加 ESLint 来提升代码质量。ESLint 是一个插件化的 JavaScript 代码质量和格式检查工具，可以帮助你避免错误并强制执行代码风格。

  9. Add Prettier for code formatting? … No / Yes
    询问你是否想添加 Prettier 来格式化你的代码。Prettier 是一个流行的代码格式化工具，它支持多种语言和框架，能够自动调整代码样式，保持代码的一致性和可读性。

  10. Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes
    询问你是否想添加 Vue DevTools 7 浏览器扩展用于调试。Vue DevTools 是一个浏览器扩展，它允许你检查 Vue 组件的状态、事件、路由等信息，对于 Vue 应用的调试非常有帮助。这里提到的“experimental”可能意味着该扩展还处于实验阶段或新版本的早期阶段。

3 暂时不做选择，直接回车

也可以像我一样,如下图所示：不选择任何一个，直接回车

4  执行下面标示 的命令（选做）
  • 也可以在 vscode 终端运行这些命令

5 可以在指定目录，看到创建的vue工程

6 在命令行 启动 vue 工程（选做）
  • 运行 之前标示的三个命令，当运行到npm install 时，需要等待它下载好包管理器需要的依赖

完成之后，此时vue 工程已经启动

将Local 路径 复制到浏览器，可以看到 Vue 工程（项目）首页

使用Visual Studio Code启动vue3项目

步骤
1 点击文件，选择打开文件夹（桌面）

2 设置中文：

1 选择“扩展”(Extensions)来打开扩展商店。

2  按住键盘上的“Ctrl+Shift+P”组合键，打开命令面板，输入Configure Display Language”。

运行 vue工程
1 使用终端，通过命令启动

0 打开终端

1 打开vscode 终端 输入命令

cd <your-project-name>

一般情况下，这个命令不需要添加。原因：当你打开你创建的文件夹时，已经默认在你的创建目录下
npm install：下载默认依赖
npm run dev：启动项目

2  点击我标的地址：出现启动成功的网页

2 打开package,json 文件，点击调试

点击 dev

vue工程的首页

2 使用通过script标签引用vue3 .js文件方式创建

  • 局部引用vue 项目

步骤

1  创建web工程 ，新建 html文件

IDEA创建Web项目（详细版）-CSDN博客

2 复制官网中的代码
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Hello vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>
3 运行HTML文件，出现Hello vue!

小结

本篇博客简单的介绍vue和如何创建，启动vue工程。

通过学习，我们应该意识到看官网的重要性。

创建vue3项目
卡拉米
07-22 711
根据你的喜好和具体需求，你可以选择使用Vue CLI或Vite来创建Vue 3项目。Vue CLI提供了更多的预设和插件支持，适合需要更多定制和插件的复杂项目。而Vite则以其快速的启动速度和即时模块热更新功能，成为现代前端项目开发的热门选择。
创建第一个 Vue 3 项目
weixin_42066070的博客
05-26 1299
本教程将通过一个简单的文章搜索系统，一步步帮你构建一个自己的 Vue 3 项目。 以下是我们最后的成果。 如果你目前正在学习 Vue 3 项目开发，相信你一定兴奋起来了，现在让我们开始吧。 入门 将 Vue 3 添加到现有项目或自己创建 Vue 3 项目有若干不同的选项。 本教程将介绍我个人最喜欢的两个选项： Vue CLI Vite Vue CLI 如果你以前搞过 Vue 开发，那么你一定用过 Vue CLI来设置项目。 Vue CLI 是 Vue 开发的命令行界面，
手把手教你创建并启动一个Vue3项目（Windows版）
徐泗空的博客
06-19 6216
1、因为npm的资源默认采用国外的，国内执行对应的安装口令会比较慢，所以我们可以把npm资源切换到国内，这样安装框架的速度就会提升。4、验证安装npm是否成功，npm是Node中自带的打包工具，输入npm -version，输出npm版本号即表示安装成功。2、最后如上图显示，我们就完成我们VUE脚手架的安装了，我们在命令窗口用口令查看当前脚手架版本。
vue3.0搭建全教程
热门推荐
qq_41729329的博客
09-04 1万+
123123。
Vue3全面解析 - 从入门到精通
最新发布
weixin_51040479的博客
07-07 1574
《Vue3全面解析：从入门到精通》是一份系统性的Vue3技术指南，涵盖核心概念、新特性与实战技巧。主要内容包括： 核心特性：介绍Composition API、响应式系统升级（ref/reactive）、性能优化（包体积减少41%，渲染速度提升）和TypeScript原生支持。 开发基础：详解项目创建（推荐Vite）、setup函数、生命周期钩子、模板语法改进（多根节点支持）和组件系统增强。 关键技术： Teleport实现DOM跨层级渲染 Suspense处理异步组件加载状态 Fragment支持多根节点
【05Vue3 起步】Vue3 起步：创建项目、编写组件和运行应用
燃正科技
06-08 5650
到这里，你已经成功入门 Vue3，并编写了一个简单的应用程序。接下来，你可以继续学习 Vue3 的文档和教程，深入了解 Vue3 的更多功能和用法。根据提示选择默认配置或手动配置项目。你还可以使用预设模板，如 TypeScript 或 Vue Router。现在我们已经创建了一个 Vue3 项目，接下来我们将编写第一个 Vue 组件。现在我们已经编写了一个 Vue 组件，接下来我们将在应用程序中使用它。现在我们已经完成了组件的编写和使用，接下来我们将运行应用程序。首先，我们将创建一个新的 Vue3 项目。
从零创建 Vue 3 项目
码农键盘上的梦
02-06 8195
方法适用场景优点缺点Vue CLI中大型项目，需要完整生态支持功能强大，插件丰富配置复杂，启动速度较慢Vite现代前端项目，追求开发体验启动速度快，开发体验极佳生态相对较新官方模板快速上手，定制化需求简单快捷功能较少StackBlitz在线原型开发，快速分享无需本地环境依赖网络，功能受限在线开发，团队协作支持多人协作依赖网络，功能受限快速创建项目官方支持，配置灵活功能较少Nuxt.js服务端渲染，静态站点生成支持 SSR/SSG，SEO 友好。
Vue2基础 01：初识Vue
Fxcrisp的博客
05-18 726
对Vue进行简单介绍，通过一个小案例大概了解Vue的写法结构。
前端开发Vue基础篇：Day01 初识Vue.pdf
11-08
渐进式框架的意思是，开发者可以将Vue作为应用的一部分，逐步地添加到现有的项目中，而无需一开始就将所有代码都转换为Vue的结构。Vue的设计理念允许它能够被自底向上逐层应用，这样的特性使得Vue不仅适合于单页应用...
Vue之初识：使用idea第一个Vue项目
高新富的博客
03-22 4634
文章目录创建项目创建项目之后：自动编译创建项目之后：初始项目架构 创建项目 创建项目之后：自动编译 sr/local/bin/node /usr/local/lib/node_modules/npm/bin/npx-cli.js --yes --package @vue/cli vue create --default . npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#dep
【Vue.js基础】1、初识Vue.js：安装与基本用法
weixin_52938153的博客
05-27 632
Vue.js是一个由尤雨溪（Evan You）开发的渐进式JavaScript框架，专注于构建用户界面。凭借其简单易用的API和灵活的架构，Vue.js能够轻松集成到项目中，也可以用于开发复杂的单页应用（SPA）。Vue.js采用双向数据绑定和基于组件的开发模式，显著提升了开发效率和代码复用性。其丰富的生态系统，包括Vue CLI、Vue Router和Vuex等工具，使得Vue.js成为现代Web开发中备受欢迎的选择。无论是初学者还是经验丰富的开发者，Vue.js都提供了强大的功能和极佳的开发体验。
【Vue】基础（一）初识Vue - 模板语法 - 数据绑定 - el与data的两种写法 - MVVM模型
李子木的博客
10-20 796
一套用于构建用户界面的javaScript框架。vue可以自底向上逐层的应用。简单应用：只需要一个轻量小巧的核心库。复杂应用：可以引用各式各样的vue插件。
Vue3 前端项目搭建详细教程
qq_42477568的博客
07-29 1726
vue3 前端搭建的详细教程，以及 element-plus 中遇到的icon 等问题的处理。
这是一篇vue3 的详细教程
世轩的博客
10-25 2695
Vue.js 是一款流行的 JavaScript 前端框架，用于构建用户界面。Vue 3 是其最新版本，带来了许多新特性和性能优化，使开发更加高效和灵活。模板语法 这里的是在组件的数据中定义的，插值表达式会将其值显示在标签中。 指令 v-bind：用于动态绑定 HTML 属性。例如，绑定一个元素的属性： 也可以简写为，如。 v-if 和 v-else：用于条件渲染。当条件为真时，显示所在的元素，否则显示所在的元素。 v-for：用于循环渲染列表。例如，渲染一个数组中的数据： 这里的是一个特殊的属
Vue3详细讲解(超详细代码)
贫僧法号依平
05-15 2373
Vue 3 介绍为什么要学习 vue 3Vue3 动机 和 新特性Vite 的使用vite介绍为什么选 Vite？Vite 的基本使用Vue3.0项目介绍vscode插件说明组合式API体验 composition APIsetup 函数reactive 函数ref 函数script setup语法(★)案例：显示鼠标案例计算属性computed函数侦听器watch函数钩子函数的使用组件通讯-父传子组件通讯-子传父依赖注入 - provide 和 inject模板中 ref 的使用vue3中废弃了过滤器。
如何从零开始启动vue３的项目？底层原理是什么？
长风破浪会有时的博客
01-21 1082
通过上述步骤，我们就成功地创建并启动了一个 Vue 3 项目。这是一个非常基础的例子，但它涵盖了从创建项目到编写简单交互的所有关键点。
Vue3实战教程：从概念到部署的完整项目搭建
A_Liyulong的博客
07-10 7719
太久没有进行从0到1进行项目搭建，日常的组件维护及组价的开发让我快忘记如何从头搭建一个完整的项目，正好借这个机会好好回忆下以往的知识。测试创建./store/user.ts，引入组件，打印效果例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
如何快速创建一个 vue3 项目？
sinat_33255495的博客
01-17 1207
Vue CLI：功能强大，支持多种配置和插件，适合复杂项目。Vite：开发体验极佳，启动速度快，适合现代前端项目。官方模板：简单快捷，适合快速上手。StackBlitz 和 CodeSandbox：在线编辑，无需本地环境，适合快速原型开发和学习。你可以根据自己的需求和偏好选择适合的方法来创建 Vue 3 项目。
vue3启动项目命令
09-05
在Vue3中启动项目的命令是`vue create`。你可以按照以下步骤来启动一个Vue3项目： 1. 首先，确保你已经安装了最新版本的Vue CLI。如果没有安装，你可以通过运行以下命令来安装Vue CLI： ``` npm install -g @vue/cli ``` 2. 创建一个新的Vue项目。在命令行中运行以下命令： ``` vue create project-name ``` 这里的`project-name`是你要创建的项目的名称，你可以根据需要进行修改。 3. 在创建项目时，你将会被要求选择一些设置选项，如预设配置（默认或手动选择）、特性（如Babel、TypeScript等）以及插件。根据你的需求进行选择。 4. 完成以上步骤后，进入到项目目录： ``` cd project-name ``` 5. 最后，运行以下命令来启动Vue应用程序： ``` npm run serve ``` 该命令将会启动一个本地开发服务器，并在浏览器中打开你的应用程序。 这样，你就成功地启动了一个Vue3项目。希望上述信息对你有所帮助！如果你有任何其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值