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

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

时间2025-06-20 16:30:14分类IT科技浏览4588
导读: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
爱思助手刷苹果7教程(iOS17.1.1如何刷机_爱思助手一键刷机iOS17.1.1教程)