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

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

时间2025-09-19 11:49:10分类IT科技浏览5307
导读: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
cs005(CS001497 Add data to a web page with JavaScript, WebKit, and Qt) vmware workstation安装步骤(VMware Workstation Pro 16 安装教程)