首页IT科技如何安装vue3.0(Vue 3 安装及环境配置)

如何安装vue3.0(Vue 3 安装及环境配置)

时间2025-04-28 07:55:52分类IT科技浏览3641
导读:1、安装 Node.js Node.js 官网:https://nodejs.org/en/download...

1            、安装 Node.js

Node.js 官网:https://nodejs.org/en/download

安装成功后在 CMD 控制台输入 node -v 和 npm -v 验证是否安装成功

2                 、配置默认安装目录和缓存日志目录

创建默认安装目录和缓存日志目录(我的nodejs目录在D盘           ,所以直接在nodejs文件夹下创建)

由于在执行全局安装语句时                  ,安装的模块会默认安装到 C:\Users\用户名\AppData\Roaming\npm 目录下      ,久而久之C盘很容易被占满(C盘足够大可以无视此步骤)           ,所以将默认安装目录和缓存日志目录重新配置到其他盘符节约C盘空间

执行命令                 ,配置默认安装目录和缓存日志目录到刚才创建的文件夹 npm config set prefix "D:\configuration\nodejs\node_global" npm config set cache "D:\configuration\nodejs\node_cache"

3      、配置环境变量

按 win 键并输入“编辑系统环境变量            ”调出系统属性界面      ,点击下方的“环境变量                 ”按钮 在系统变量下新建 NODE_PATH 变量      ,输入默认安装目录 node_global 下的 node_modules 的路径 D:\configuration\nodejs\node_global\node_modules 进入系统变量的Path                 ,输入nodejs安装路径 D:\configuration\nodejs\ 进入用户变量的Path            ,输入 nodejs 默认的模块调用路径 D:\configuration\nodejs\node_global D:\configuration\nodejs\node_cache

4      、配置淘宝镜像

使用 NPM 来安装用的是国外的服务器      ,经常会出现超时错误                 ,可以通过修改为国内的淘宝镜像来加速安装            。淘宝 NPM 镜像是一个完整 npmjs.com 镜像            ,同步频率目前为 10分钟一次,以保证尽量与官方服务同步                 。

安装 cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 验证是否安装成功 cnpm config get registry

5                 、安装 vue 和脚手架

安装 vue.js cnpm install vue -g 验证安装是否成功 cnpm info vue npm list vue 安装 webpack 模块 cnpm install webpack -g 安装 webpack-cli cnpm install --global webpack-cli

6           、安装vue-cli 3.x

cnpm install @vue/cli –g

7      、创建 vue 3 项目

以管理员身份打开 cmd 控制台                 ,进入想要创建项目的目录                  ,开始创建项目 vue create [项目名称]

如果未使用管理员身份,可能会出现以下报错

根据给出的提示进入项目目录           ,运行项目

npm run serve

在浏览器输入给出的网址                  ,出现如下页面则表示项目搭建成功

8                  、可能遇到的问题

Vue 安装过程中遇到的问题记录

声明:本站所有文章      ,如无特殊说明或标注           ,均为本站原创发布      。任何个人或组织                 ,在未征得本站同意时      ,禁止复制           、盗用、采集                  、发布本站内容到任何网站                 、书籍等各类媒体平台      。如若本站内容侵犯了原著者的合法权益      ,可联系我们进行处理                 。

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
python架构图(Python高级架构模式的整理) django模块详解(Django模板控制结构(for/forloop/if))