当前位置：首页 > news >正文

Vue | 开学第一课！零基础教程

news 来源：原创 2025/6/6 21:54:18

背景介绍

安装方式

下载环境软件

NodeJS手册

如何查看node版本

镜像源

完整流程

创建根文件夹并拖进 VSCode

调用控制台

安装 vite 脚手架

配置项目

安装依赖

启动项目

查看页面

问题

创建项目失败

解决方法

权限问题

解决方法

其他问题

背景介绍

今天是第一天上Vue课程，但是环境有点曲折，软件版本问题、npm create vite@latest 创建问题，npn install 的权限不足，npm install 的低版本问题，

安装方式

下载环境软件

官网下载(会有的慢)：Node.js — 在任何地方运行 JavaScript

国内下载: Node.Js中文网

NodeJS手册

Node.js 中文文档 | Node.js 中文网

如何查看node版本

则通过 cmd的方式，去输入

Win + R 调出命令行或者按 Win 输入 cmd

node -v

镜像源

更换其他镜像源，这里提供了2个镜像源

# 阿里源

npm install -g cnpm --registry=https://registry.npmmirror.com

# 淘宝源

npm config set registry http://registry.npm.taobao.org/

完整流程

创建根文件夹并拖进 VSCode

调用控制台

安装 vite 脚手架

npm create vite@latest

配置项目

根据命令去慢慢执行

cd chen-ui 是进入当前目录,

cd chen-ui

ls 可以查看一下是否存在这个目录

安装依赖

安装依赖前最好是配置成国内镜像，不然会比较卡

node install

启动项目

node run dev

查看页面

问题

创建项目失败

输入 Ctrl + ~ 调出控制台

解决方法

更换更高的NodeJS版本(文章顶部提供了下载链接)

权限问题

解决方法

以管理员身份运行 PowerShell：
- 在系统搜索栏中输入“PowerShell”。
- 右键点击“Windows PowerShell”，选择“以管理员身份运行”。
更改执行策略：
- 在管理员模式的 PowerShell 中，运行以下命令来查看当前的执行策略：
```
Get-ExecutionPolicy
```
  如果返回 Restricted，说明当前策略禁止运行脚本。
- 更改执行策略为 RemoteSigned，允许运行本地创建的脚本，但要求远程脚本签名：
```
Set-ExecutionPolicy -Scope CurrentUser RemoteSigned
```
  如果提示需要确认，输入 Y。
验证更改是否成功：
- 再次运行以下命令确认执行策略已更改：
```
Get-ExecutionPolicy
```
  如果返回 RemoteSigned，说明更改成功