Node.js安装和创建vue项目

Posted 2022-11-30 未来.....

Node.js安装和修改缓存镜像位置

1、下载node.js【官网地址】

下载完成后运行下载文件。
一路next就行，到安装目录根据自己的安装位置进行修改，剩下的继续下一步就好。

2、修改缓存位置

nodejs的默认文件夹是在C:\\Users\\用户名\\AppData\\Roaming\\npm
在你的安装目录下创建两个文件夹node_cache node_global。
在管理员命令窗口运行一下代码：
这里的目录是你的安装目录，这里是两条命令，两条命令，别看错了。

npm config set prefix "E:\\node\\node_global"
 
npm config set cache "E:\\node\\node_cache"

运行结果：

3、修改环境变量

右击此电脑，选择属性，找到高级系统设置，点击变量。
此处需要设置两个环境变量。

1. 在环境变量中，新增变量：

NODE_PATH
E:\\node\\node_global  //这是你的文件夹所在目录

2. 在用户变量的path 里面，找到最后是C:\\Users\\用户名\\AppData\\Roaming\\npm结尾的给删除掉。

3. 继续在path里面添加你的文件夹所在位置：

3、1 下载cluster

在命令窗口运行下面的命令：

npm install cluster -g

运行后查看文件夹：出现cluster文件夹代表设置成功。

3、修改镜像地址

3、1设置taobao镜像

npm config set registry https://registry.npm.taobao.org/

3、2 查看是否设置成功

npm config get registry

3、3 下载安装镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

3、4 查看版本

node -v
cnpm -v

提示：如果这里运行cnpm -v提示'cnpm' 不是内部或外部命令，也不是可运行的程序 或批处理文文件

这里提供两种解决方法：

1. 关闭cmd窗口，重新打开一个，再次运行cnpm -v
2. 如果第一种不可以使用，就需要在环境变量中加上一个变量了。
   右击此电脑，选择属性，找到高级系统设置，点击变量。
   在环境变量中，新增变量：

CNPM_PATH
E:\\node\\node_global\\node_modules\\cnpm   //这里是你的路径

4、 安装vue脚手架

cnpm install -g @vue/cli

安装完成后使用vue --version查看版本。

4、1 打开可视化界面

vue ui

4、2 创建项目

4、2、1 选择存放位置。

提示：如果需要修改位置点击右边的笔，将你想要设置的路径直接复制进去然后直接敲回车，一定要直接敲回车，不然会出现红色警告.

4、2、2 设置项目名字

4、2、3 设置预设模式

4、2、3 设置插件

其他的插件暂时不需要，只选中以下四个选项即可。

4、2、3 设置配置选项

点击创建项目后，会在命令窗口出现加载项，创建时间根据你的电脑性能来看的。

4、2、4 查看文件

等待命令执行完毕，此时可以在文件夹中可以看到已经创建完毕。

此时就可以使用开发工具打开该项目了。拜拜