目录

目录

前言

一、node.js安装和配置

1. 下载安装node.js

2. 配置默认安装目录和缓存日志目录(不配置也可,据情况而定)

3. node.js环境配置

4. 配置淘宝镜像源

第一种:直接修改npm的默认配置

​编辑第二种:安装cnpm

二、安装vue及脚手架

1.安装vue.js

此处遇见的错误:(如果没遇见可忽略)显示empty

2.安装webpack模板

三、安装vue-cli 3.x

1、卸载旧版本

2、安装新版本

3、新建项目

4、运行项目

四、cli3下拉取2.x模板



前言

为以后方便更改nodejs版本,建议安装nvm

nvm 管理node版本

安装nvm后可直接从第二步:安装vue及脚手架 开始

不想安装nvm的可依步骤进行

一、node.js安装和配置

1. 下载安装node.js

官网下载最新版本:Download | Node.js
可以下载安装包(安装教程见:Node.js 安装配置 | 菜鸟教程

由于Node.js 中默认安装了 npm,所以不用额外配置就能在全局命令中使用 npm命令,在cmd中测试一下是否安装成功了:输入 node -v 与 npm –v分别查看版本信息

2. 配置默认安装目录和缓存日志目录(不配置也可,据情况而定)

说明:这里的环境配置主要配置的是npm安装的全局模块所在的路径,以及缓存cache的路径,之所以要配置,是因为以后在执行类似:npm install express [-g] (后面的可选参数-g,g代表global全局安装的意思)的安装语句时,会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中,占C盘空间。
1、创建默认安装目录和缓存日志目录
我希望将全模块所在路径和缓存路径,放在我node.js安装的文件夹中,则在我安装的文件夹【"D:\Program Files \nodejs】下创建两个文件夹【node_global】及【node_cache】分别作为默认安装目录和缓存日志目录。

2、执行命令,将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录:(路径改为自己的

npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"

查看npm全局安装包保存路径

npm config get prefix


查看npm装包缓存路径

npm config get cache

3. node.js环境配置

说明:以下D:\Program Files\nodejs为我的node的安装路径,记得改成你们自己的路径

“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”,进入环境变量对话框

1、【系统变量】下新建【NODE_PATH】,此处设置第三方依赖包安装目录
如果跟着第2步修改了全局安装目录,则输入【D:\Program Files\nodejs\node_global\node_modules 】

2、【系统变量】下的【Path】添加上node的路径【D:\Program Files\nodejs\】

3、如果设置了全局安装目录,【用户变量】下的【Path】将默认的 C 盘下 APPData/Roaming\npm 修改为【D:\Program Files\nodejs\node_global】,【D:\Program Files\nodejs\node_cache】,这是nodejs默认的模块调用路径

在这里插入图片描述

4. 配置淘宝镜像源

查看npm下载源 npm config get registry

将npm的模块下载仓库从默认的国外站点改为国内的站点,这样下载模块的速度才能比较快,现在用的都是淘宝镜像源(https://registry.npm.taobao.org)

这里有两种配置选择,一是直接修改npm命令的仓库地址为淘宝镜像源,另一种是安装cnpm命令。(推荐第二种,本人后面遇到的错误需要安装cnpm

第一种:直接修改npm的默认配置

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

验证:配置后可以根据 npm config get registrynpm config list 命令查看npm下载源是否配置成功,如图所示配置前为"https://registry.npmjs.org/"
在这里插入图片描述

配置后为淘宝镜像,表示配置成功

在这里插入图片描述
第二种:安装cnpm

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

验证方式变成了cnpm config get registrycnpm config list如图所示

在这里插入图片描述


二、安装vue及脚手架

1.安装vue.js

npm install vue -g

或者

cnpm install vue -g

 查看安装的vue信息:npm info vue 或者cnpm info vue

在这里插入图片描述
查看安装的vue版本npm list vue
在这里插入图片描述

此处遇见的错误:(如果没遇见可忽略)显示empty

解决方法

2.安装webpack模板

1、创建项目(最好在cd到D盘的某个位置,即项目的路径,否则项目会新建在C:\Users\Administrator\,也可以直接在想要的项目路径下输入cmd)

 vue init webpack 项目名

切记:项目名不要取中文和大写字母。

配置:我习惯一路回车,具体需求因人而异

最后结果如下,项目初始化成功
在这里插入图片描述

若empty问题已解决, vue init webpack 项目名报错 "vue不是xxxxxx",可跳过此步,从三、安装vue-cli 3.x  ,进行到最后神奇的发现vue init webpack可以了(我也不知道为什么)

2、按提示代码进入到项目目录下并运行npm run dev
在这里插入图片描述
按提示打开地址http://localhost:8081, 打开网址如图所示
在这里插入图片描述

结束项目运行:ctrl+c,选择Y即可停止项目的运行。

三、安装vue-cli 3.x

1、卸载旧版本

卸载2.x版本 npm uninstall vue-cli -g
卸载3.x版本 npm uninstall @vue/cli -g

2、安装新版本

npm install @vue/cli –g
指定版本号 npm install -g @vue/cli@3.12.1 不指定版本号会默认安装最新的版本
在这里插入图片描述

3、新建项目

vue create 项目名

在这里插入图片描述

习惯一路回车

此处遇见的错误:(如果没遇见可忽略)vue packages version mismatch的报错:

vue create报错解决方式

配置成功

在这里插入图片描述

4、运行项目

cd 到我们的项目目录, 然后使用npm run serve可以运行我们的项目
http://localhost:8080/ 打开就可以看到我们的运行的结果了,如图
在这里插入图片描述

四、cli3下拉取2.x模板

npm install -g @vue/cli-init

依然可以新建2.x的项目 vue init webpack my-vue

本文借鉴

文章icon-default.png?t=N7T8https://blog.csdn.net/dream_summer/article/details/108867317中间插入了本人遇到的问题及解决方法,更多问题,此篇文章评论下方有解决方法

Logo

前往低代码交流专区

更多推荐