Vue安装方法（vue3.0怎么安装）



目录

目录

一、安装环境 node

1.下载地址为：Node.js — 在任何地方运行 JavaScript

2.安装：无脑下一部，此处省略

3.检查安装是否成功：使用 npm -v 或者 node -v

4.环境变量配置

二、安装vue环境

1.配置淘宝镜像：

2.安装 Yarn：打开命令提示符（CMD），运行以下命令

3.全局安装脚手架

4.创建项目

5.启动项目

​三、项目目录介绍

四、遇到的问题以及解决方案

1.下载地址为：Node.js — 在任何地方运行 JavaScript

2.安装：无脑下一部，此处省略

3.检查安装是否成功：使用 npm -v 或者 node -v

4.环境变量配置

        说明：这里的环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，之所以要配置，是因为以后在执行类似：npm install express [-g] （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到【C:Users用户名AppDataRoaming pm】路径中，占C盘空间

 4.1 例如：将全模块所在路径和缓存路径放在我node.js安装的文件夹中，则在安装的文件夹【D:Program Files odejs】下创建两个文件夹【node_global】及【node_cache】如下图：

4.2 设置文件夹在node中配置，已管理员身份打开cmd 输入下面的命令：

4.3设置环境变量，关闭cmd窗口，“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”
进入环境变量对话框，在【系统变量】下新建【NODE_PATH】，
输入【D:Program Files odejs ode_global ode_modules】，将【用户变量】下的【Path】修改为【D:Program Files odejs ode_global】

1.配置淘宝镜像：

检查安装是否成功：cnpm -v

2.安装 Yarn：打开命令提示符（CMD），运行以下命令

3.全局安装脚手架

npm install --global @vue-cli 是 及更高版本的 手脚架 ()
npm install --global vue-cli 是  的 手脚架

3.1如果使用最新版本的脚手架：

这个命令会安装最新版本的 ，通常会是 5.x 版本或更高版本。如果你想安装特定版本，可以将  替换为具体的版本号，例如 

3.2卸载使用：

4.创建项目

vue3.x以上使用 ，需要在项目的目录下执行

npm命令：npm create vue@latest

 pnpm命令：

yarn命令： 

 bun命令：

根据自己选择使用创建项目

创建会提示相关安照下面输入即可：

5.启动项目

下载依赖：使用命令 npm install  或则 yarn install

在项目的目录下使用命令启动项目：yarn run serve 或则 npm run serve

创建成功的项目如下：

• ：存放项目依赖的模块，这些模块是通过 npm 或 yarn 安装的。
• ：通常用于存放静态资源，如 HTML 文件、图片、字体等，这些资源在构建过程中会被原样复制到输出目录。
• ：源代码目录，包含项目的主要逻辑和代码实现，如 Vue 组件、JavaScript 模块等。
• ：指定了 Git 版本控制系统应忽略的文件和文件夹，避免将不必要的文件纳入版本控制。
• ：Babel 的配置文件，用于配置 JavaScript 代码的转译规则，以便在不同的浏览器或环境中运行。
• ：JavaScript 项目的配置文件，用于配置代码的编辑和调试环境，例如指定代码的根目录、路径别名等。
• ：项目的配置文件，包含项目的名称、版本、依赖项、脚本等信息，是 npm 或 yarn 管理项目的重要文件。
• ：项目的说明文件，通常用于记录项目的介绍、安装步骤、使用说明等信息。
• ：Vue 项目的配置文件，用于自定义 Vue CLI 的构建和开发行为。
• ：Yarn 包管理器生成的锁文件，确保在不同环境中安装的依赖版本一致。

问题一：

解决方案：

方法一：以管理员身份运行命令提示符或终端

在 Windows 上，右键点击命令提示符图标，选择 “以管理员身份运行”，然后再次尝试运行命令。

在 macOS 或 Linux 上，如果使用的是普通用户权限，可以尝试在命令前加上，以管理员权限运行命令，但这可能会带来一些安全风险，使用时需谨慎。

方法二：检查文件和目录权限

确保你对及其子目录有足够的读写权限。如果不确定，可以尝试更改这些目录的权限，使其对当前用户可读写

在 Windows 上，可以右键点击目录，选择 “属性”->“安全” 选项卡，然后检查和修改用户的权限。在 macOS 和 Linux 上，可以使用命令行工具如来修改目录权限。

方法三：清理 npm 缓存并重新尝试

运行以下命令清理 npm 缓存：

然后再次尝试运行命令

问题二：

这个错误表示没有找到匹配的  版本。可能是以下原因导致的：

1. 包名错误：请确保你输入的包名是正确的。应该是 （或者特定的 Vue 版本号）来创建一个 Vue 项目。而不是 。
2. 网络问题：有时候网络不稳定可能导致无法正确下载所需的包。你可以检查你的网络连接，或者尝试使用不同的网络环境或代理设置。
3. npm 缓存问题：尝试清除 npm 缓存并再次运行命令。在命令提示符中运行以下命令：

然后再次尝试创建 Vue 项目的命令。

如果问题仍然存在，可以尝试直接使用  命令来创建 Vue 项目，前提是你已经安装了 。如果还没有安装 ，可以使用以下命令进行全局安装：

 问题三：

这个错误提示表明在安装过程中遇到了证书过期的问题。你可以尝试以下方法来解决：

方法一：更新 Yarn

1. 卸载当前的 Yarn：

1. 安装最新版本的 Yarn：

方法二：设置 Yarn 的代理和源

1. 如果你在使用代理服务器，可以设置代理：

将  和  替换为你的实际代理地址和端口号。

设置 Yarn 的源为国内镜像源，例如淘宝源：

方法三：检查系统时间和日期

确保你的系统时间和日期设置正确，因为不正确的时间可能导致证书验证问题。

方法四：使用其他包管理器（可选）

如果问题仍然存在，你可以尝试使用 npm 来代替 Yarn 进行安装：

在创建项目时，选择使用 npm 作为包管理器：

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/64996.html