【vue】01.vue3环境搭建及项目创建

一.环境搭建

1.安装node.js

Node.js是一种可以让电脑运行JavaScript代码的工具。通常，JavaScript是用来在网页上添加互动性的，比如点击按钮后发生的事情。但有了Node.js，你可以在电脑上运行JavaScript来执行各种任务，比如创建网站、处理数据、管理文件等，而不仅仅是在网页浏览器中使用。简单来说，Node.js就像是一个桥梁，让JavaScript可以在电脑上做更多的事情。
 

node.js官网：点击进入

具体安装教程：Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）

2.安装npm

npm 是“Node Package Manager”的缩写，它是 Node.js 的一个包管理工具。简单来说，npm 就是一个帮助程序员分享和下载代码的工具。

具体安装教程：npm安装-详细教程、

二.项目创建

1.基于vue-cli创建

步骤1：安装Vue CLI

npm install -g @vue/cli
# 或者
yarn global add @vue/cli

步骤2：创建一个vue3项目

vue create my-vue3-project

这里”my-vue3-project“是新项目的名称，可以根据需要修改它。

步骤3：选择预设配置

执行上述代码后，Vue CLI 会提供一些可选择的预设配置，可根据实际情况进行选择

步骤4：进入项目目录并启动开发服务器

cd my-vue3-project
npm run serve
# 或者
yarn serve

2.基于vite创建

步骤1：安装vite

npm install -g vite
# 或者
yarn global add vite

步骤2：创建一个vue3项目

npm init vue@latest

步骤3：选择预设配置

步骤4：进入项目目录并启动开发服务器

cd study
npm install
npm run dev

三.报错解决

1.报错1

使用npm create vue时提示：TypeError: (0 , import_node_util.parseArgs) is not a function

原因：node版本问题

解决：使用18.19.1版本

现在就可以开始编辑项目文件并开发 Vue 3 应用了。