【Web 前端开发】vue3开发环境部署

1、安装 Node.js 和 npm

访问 Node.js 官网 下载并安装最新的 LTS 版本。

安装完成后,打开命令行工具,

输入 node -v 和 npm -v 检查安装是否成功。

bash 复制代码
 node -v
 npm -v 

如下图:

2、安装 Vue CLI

在命令行工具中输入以下命令安装 Vue CLI:

bash 复制代码
npm install -g @vue/cli

安装完成后,输入 vue --version 检查 Vue CLI 是否安装成功。

bash 复制代码
vue --version 

如果出现异常,vue : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本。

打开管理员终端,输入以下指令(签名或运行这些脚本)

bash 复制代码
set-ExecutionPolicy RemoteSigned 

再次输入指令,vue --version

3、创建 Vue 3 项目

使用 Vue CLI 创建一个新的 Vue 3 项目:

在自己的指定文件夹中打开终端

bash 复制代码
vue create my-project

选择 Vue 3 版本,并根据提示完成项目配置。

安装完成后如下图

4、启动开发服务器

进入项目目录:

bash 复制代码
cd my-project

启动开发服务器:

bash 复制代码
npm run serve

打开浏览器,访问 http://localhost:8080 查看项目运行情况。

如下图:

5、安装 VS Code(可选)

下载并安装 Visual Studio Code 作为代码编辑器。

安装 Vue.js 插件以获得更好的开发体验。

相关推荐
前端_yu小白3 分钟前
js异步机制
前端·javascript·async·promise·await·js异步·回调地狱
Spider Cat 蜘蛛猫4 分钟前
chrome extension开发框架WXT之WXT Storage api解析【补充说明一】
前端·javascript·chrome
zhanghongyi_cpp2 小时前
4. “3+3”高考选考科目问题
python
程序猿John4 小时前
ES6 新增特性 箭头函数
前端·javascript·es6
百锦再4 小时前
五种常用的web加密算法
前端·算法·前端框架·web·加密·机密
@大迁世界5 小时前
彻底改变我 React 开发方式的组件模式
前端·javascript·react.js·前端框架·ecmascript
知识中的海王5 小时前
js逆向入门图灵爬虫练习平台第六题
python
William Dawson5 小时前
【Vue 3 + Element Plus 实现产品标签的动态添加、删除与回显】
前端·javascript·vue.js
碳基学AI5 小时前
北京大学DeepSeek内部研讨系列:AI在新媒体运营中的应用与挑战|122页PPT下载方法
大数据·人工智能·python·算法·ai·新媒体运营·产品运营
拉不动的猪5 小时前
项目基础搭建时的一些基本注意点
前端·javascript·面试