创建vue项目，配置环境，执行项目

最新推荐文章于 2024-07-22 09:01:12 发布

uyi31

最新推荐文章于 2024-07-22 09:01:12 发布

阅读量581

点赞数 1

本文链接：https://blog.csdn.net/LawrenceUyi31/article/details/127154410

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

创建vue项目，包含配置，运行实践，相关报错的解决方法

一、下载
二、安装
三、配置
四、执行
五、Resolve errors

一、下载

官网下载，这里是官方网址：https://nodejs.org/en/
这个文件的下载可能有点缓慢，请耐心等待
下载后会是这种文件：node-v16.17.1-x64.msi

在这里插入图片描述

二、安装

执行`node-v16.17.1-x64.msi`文件,开始安装，可设定文件安装路径
注意：执行完.msi文件后,在电脑的环境变量Path中:会自动生成一个路径，例如：D://Programs/nodejs/
在此基础上，可打开cmd,输入：node -v与npm -v,即可查看安装的版本，
上述步骤如果ok代表你完成了大半
其次的命令：node root -g与npm root -g都可以查看文件存储的位置。

在这里插入图片描述

接下来就是配置环境变量了作者这中配置方式是为了快捷，还是建议使用%NODE_PATH%的方式引用进来

在这里插入图片描述

在cmd中执行下面的两条命令，将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录：

npm config set prefix "D:\ApplicationOverviewDirectory\nodejsorg\nodejs\node_global"
npm config set cache "D:\ApplicationOverviewDirectory\nodejsorg\nodejs\node_cache"

声明：作者的文件是存放在D:\ApplicationOverviewDirectory\nodejsorg\nodejs目录下的，配置的时候要填写自己的文件目录

三、配置

这个单独来写，是因为，上面的都是基础，作者也是从这里开始遇到错误，并解决报错的


打开cmd,或者windows PowerShell,先输入node -v 与npm -v,一般是正常出结果的，如果报错：例如。。。稍等去看第四点

npm install -g cnpm --registry=https://registry.npm.taobao.org
这是淘宝设置的国内镜像，可快速加载创建

另外配置
创建项目时，可以在cmd中输入：vue ui
如下图所示，当然要使用这种方式，必须下载相应的插件与依赖包

在这里插入图片描述

配置vue ui：可打开vue的开始画管理工具界面，打开cmd,可输入指令
#vue-cli 安装依赖包
cnpm install --g vue-cli

#@vue文件的生成
cnpm install --g @vue/cli

注：执行这两个命令，会生成下面两个文件，一般是执行其中一个指令就行，作者之前因为权限问题是报错了，导致又执行了第二个指令

在这里插入图片描述