1、下载安装node.js
图片展示的版本为16.13.2,我选择的版本是12.16.1
直接打开下载好的安装包,除了修改自己的安装路径,其他的都默认下一步
修改自定义安装目录,下图所示
最后一步,可以不勾选。
环境变量已经自动配置好了不用管它
确定安装成功(cmd最好使用管理员模式)
#查看node和npm的版本号
node -v
npm -v
2、安装淘宝镜像(cnpm)
使用镜像会下载快一些
# -g 全局安装
npm install cnpm -g
然后出现三个警告第一个关于uuid版本问题的,搜索网上给出的回答是这样的,所以忽略这个问题
cnpm就安装的位置在 C:\Users\Administrator\AppData\Roaming\npm\node_modules下
**注意:**AppData目录是一个隐藏目录,展示隐藏项目
3、安装vue-cli
#安装vue-cli -g表示全局
cnpm install vue-cli -g
查看下载后的vue-cli文件,在C:\Users\Administrator\AppData\Roaming\npm\node_modules目录下
查看可以基于哪些模板创建vue应用程序(通常选择webpack)
vue list
此时vue-cli已经创建完毕
4、创建一个vue-cli程序
这里我将vue-cli创建到G盘下的vue_cli_dome文件中(位置自定义)
在cmd中进入当前文件下
#进入G盘
G:
#进入vue_cli_dome文件目录下
cd vue_cli_dome
#创建一个vue项目,项目名称是 myvue
vue init webpack myvue
下列操作中,回车表示默认配置
回车之后,变成这样,接着输入n
一路输入n,到达这一步
回车,完成
对应位置出现 myvue文件
5、初始化myvue并运行
1、初始化myvue
在cmd中进入myvue中
cd myvue
安装项目依赖环境
npm install
小插曲 ↓ :
我的出现了下列的问题(如果没有出现下列情况直接跳过插曲部分)
关于下面情况的解释: Npm 安装包出现一大堆 WARN???
然后出现提示运行 npm audit fix 修复
使用npm audit fix修复后
我选择忽略这个,不管它。
小插曲结束 ↑
最后下载好的环境都在myvue下的node_modules下
2、运行myvue
两种方式运行
第一种、cmd命令
打开cmd,执行下列命令
npm run dev
运行成功,如下图所示 ↓
浏览器访问 http://localhost:8080,成功运行如下图
如何关闭该项目
在cmd中 Ctrl+C 出现如下图,键入 Y 回车即可结束运行
第二种、使用idea启动myvue
打开idea->“open”->“myvue”
右上角点击 Add Configuration…
点击左上角 + 号,点击 npm
输入 dev ,点击 OK 即可
控制台信息显示如下,直接访问 http://localhost:8080 即可