在Windows下搭建Vue开发环境
一、在Windows下搭建Vue开发环境1.安装node.jsnode.js-v12.18.31.1. 安装流程2.设置node的全局和缓存路径2.1.新建文件目录在安装目录中,如我的:C:\Program Files\nodejs,新建两个文件夹,分别是:node_cache(缓存)、node_global(全局)2.2.设置缓存路径win+r --> cmd --> npm con
·
一、在Windows下搭建Vue开发环境
1.安装node.js
1.1. 安装流程




2.设置node的全局和缓存路径
2.1.新建文件目录
在安装目录中,如我的:C:\Program Files\nodejs,新建两个文件夹,分别是:node_cache(缓存)、node_global(全局)
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9D4JmOVn-1649677355877)(C:\Users\lol\AppData\Roaming\Typora\typora-user-images\image-20220411163817566.png)]](https://i-blog.csdnimg.cn/blog_migrate/79f5acb2de07bd60b1a0a9f46687d4db.png)
2.2.设置缓存路径
win+r --> cmd --> npm config set cache "C:\Program Files\nodejs\node_cache"
2.3.设置全局模块存放路径
win+r --> cmd --> npm config set prefix "C:\Program Files\nodejs\node_global"
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eYiRe4AR-1649677355878)(C:\Users\lol\AppData\Roaming\Typora\typora-user-images\image-20220411165212698.png)]](https://i-blog.csdnimg.cn/blog_migrate/30b0e4fca2630d294def8961b840c886.png)
3.设置淘宝镜像
以管理员身份打开命令提示符窗口 --> npm install -g cnpm --registry=https://registry.npm.taobao.org
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rRe4PNIt-1649677355879)(C:\Users\lol\AppData\Roaming\Typora\typora-user-images\image-20220411165929813.png)]](https://i-blog.csdnimg.cn/blog_migrate/dd7361e578bec757a06b4529c27caa41.png)
4.设置环境变量
设置环境变量的目的在于:在任何目录都可以执行node和vue命令
在环境变量中,Path里面新增一个global文件夹的路径,如:C:\Program Files\nodejs\node_global
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-atIikOtn-1649677355879)(C:\Users\lol\AppData\Roaming\Typora\typora-user-images\image-20220411170302400.png)]](https://i-blog.csdnimg.cn/blog_migrate/90c01b0805a036d6c78c061d7e37ccf1.png)
同时新增一个环境变量:NODE_PATH,路径为node.js目录下的modules文件夹
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E7MGSAxr-1649677355879)(C:\Users\lol\AppData\Roaming\Typora\typora-user-images\image-20220411170615399.png)]](https://i-blog.csdnimg.cn/blog_migrate/8317ad2e95661dd4b7a108625ee5b315.png)
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XXtvSIye-1649677355880)(C:\Users\lol\AppData\Roaming\Typora\typora-user-images\image-20220411170514775.png)]](https://i-blog.csdnimg.cn/blog_migrate/bd63dd989aa17cdf437f0e7670838672.png)
5.安装Vue
需要先关上命令行窗口,并再次打开cmd执行安装vue的命令(管理员打开)
cnpm install vue -g
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rL9WJQHf-1649677355881)(C:\Users\lol\AppData\Roaming\Typora\typora-user-images\image-20220411170909792.png)]](https://i-blog.csdnimg.cn/blog_migrate/2f28856b3442dde7620b03c66538ef36.png)
6.安装Vue-cli脚手架
执行cnpm install -g vue@cli
报错后执行:
npm i npm -g
npm i @vue/cli -g
cnpm i @vue/cli -g
7.创建vue项目
vue create first 接下来回车即可
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-48aAhhUl-1649677355881)(C:\Users\lol\AppData\Roaming\Typora\typora-user-images\image-20220411172200181.png)]](https://i-blog.csdnimg.cn/blog_migrate/4bb26bf5f6d648762212b7cae0d8c956.png)
cd first
npm run serve
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hfaZRARG-1649677355881)(C:\Users\lol\AppData\Roaming\Typora\typora-user-images\image-20220411172343772.png)]](https://i-blog.csdnimg.cn/blog_migrate/d04cc0c11719a1ec617afabf7dd3fed8.png)
8.访问已测试是否创建运行成功
http://localhost:8080/
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ocWWpPHW-1649677355881)(C:\Users\lol\AppData\Roaming\Typora\typora-user-images\image-20220411172439448.png)]](https://i-blog.csdnimg.cn/blog_migrate/b6ba431c41d5d20c27bf42707c406da0.png)
二、Vue-cli脚手架3.0前后版本切换
1. 3.0以下切换至3.0以上
npm uninstall -g vue-cli //卸载当前vue
npm install -g @vue/cli //安装vue
//如果上面代码报错,则执行以下代码
//以下代码进行更新操作
npm i npm -g
npm i @vue/cli -g
cnpm i @vue/cli -g
2. 3.0以上切换至3.0以下
npm uninstall -g @vue/cli //卸载当前vue
npm install -g vue-cli //安装vue
npm i vue-cli -g
cnpm i vue-cli -g
更多推荐
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zlz0Sim1-1649677355875)(C:\Users\lol\AppData\Roaming\Typora\typora-user-images\image-20220411162940523.png)]](https://i-blog.csdnimg.cn/blog_migrate/28c5256519e05c3373708356c2538dd3.png)



所有评论(0)