首页 > 系统相关 >手把手教你在Windows下搭建Vue开发环境

手把手教你在Windows下搭建Vue开发环境

时间:2023-06-21 22:46:05浏览次数:48  
标签:npm node Vue cli Windows 手把手 vue registry 安装

一、下载Note.js

下载地址:https://nodejs.org/zh-cn/download

 二、点击安装包无脑下一步即可(建议修改下路径)

三、在选择的安装路径下创建两个文件夹node_cache和node_global

 四、打开CMD,设置缓存路径和全局模块存放路径

  4.1 缓存路径

  npm config set cache "D:\Software_installation\nodeJS\node_cache"

  4.2 全局模块存放路径

  npm config set prefix "D:\Software_installation\nodeJS\node_global"

五、安装使用淘宝的cnpm命令行工具替代默认的npm(CMD使用管理员方式运行,不然可能会报错)

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

打开cmd执行以下命令检查是否安装成功,如果出现如下信息,说明安装成功了

 

 备注:

也可以将镜像源修改为淘宝镜像

查看当前镜像源:npm get registry

默认镜像源为:https://registry.npmjs.org/

将当前镜像源修改为国内淘宝镜像npm config set registry https://registry.npm.taobao.org

六、设置环境变量

  6.1 打开电脑环境变量的Path,添加刚刚新建的node_global文件夹的位置

       

   6.2 新建环境变量NODE_PATH,配置变量值为nodejs安装目录下的node_modules文件夹目录路径

       

 七、安装vue

  如果之前打开了命令行窗口,需要先关闭

  重新运行cmd,进入终端命令行模式

  cnpm install vue -g

 八、安装Vue-cli脚手架

  cnpm install -g vue-cli

 备注:如果需要安装3.x版本,将vue-cli改为@vue/cli即可

安装之前先卸载旧版本 npm uninstall -g @vue/cli
安装3.0及其以后版本 npm install -g @vue/[email protected]
安装3.0以前的旧版本 npm install -g [email protected]

验证VUE是否安装成功

vue -V

 END

点赞、关注支持,我会不断更新各种干货!

标签:npm,node,Vue,cli,Windows,手把手,vue,registry,安装
From: https://www.cnblogs.com/lwl80/p/17497241.html

相关文章

  • Vue / uniapp cart.js购物车
     constcart={namespaced:true,state:{//{"store_id":"","goods_id":"","goods_name":"","goods_price":"","goods_count":"","......
  • ubuntu 访问Windows的共享
    假定您的Windows共享网络连接已经正确设定好。网络主机的IP:192.168.0.1网络主机的使用者名称:myusername网络主机的登录密码:mypassword网络主机的登陆域为:mydomain分享中的目录名称:share1主机上要挂载的目录:/media/sharename要挂载网络共享目录时sudomkdir/medi......
  • R语言中的跨平台支持:如何在Windows、MacOS和Linux上使用R语言进行数据分析和可视化
    目录当今数据科学领域,R语言已经成为了数据分析和可视化的流行工具。R语言具有强大的功能和灵活性,使得它可以在各种不同的平台上运行,包括Windows、MacOS和Linux。因此,本文将介绍R语言中的跨平台支持,如何在Windows、MacOS和Linux上使用R语言进行数据分析和可视化。一、引言随着数......
  • 无法通过windows功能控制面板自动安装或卸载windows server角色和功能
    打开PowerShell后,直接复制下面安装.NETFramework3.5的脚本命令,记住全部复制,然后直接全部粘贴(不要一行一行复制粘贴):Set-ItemProperty-Path'HKLM:\SOFTWARE\Policies\Microsoft\Windows\WindowsUpdate\AU'-NameUseWUServer-Value0Restart-Service-NamewuauservInstall......
  • vue3 虚拟滚动的一些实践
    看到这个vueuse库打开新天地后,看到一句warning:Considerusing vue-virtual-scroller instead,ifyouarelookingformorefeatures.于是用起来。好用,前提是看懂文档业务需要使用grid,它的grid竟然不是css,而是js计算//tempalte<RecycleScroller:ref="(el)......
  • vue3 - onMounted 多次触发 - 解决
    1.原因<router-view>外面使用了 <keep-alive>导致多次触发 onMounted生命周期2.解决使用<keep-alive>的第一层页面初始化数据的生命周期应该放弃使用 onMounted 应该使用onActivated用法与 onMounted 是一样的 ......
  • 自动化平台总结(httprunner+djangorestframework+python3+Mysql+Vue)【基础构思】
    一、前言最近从零搭建了一个自动化测试平台,虽然不是第一次从零搭建,但是也从来没有进行过这类搭建的总结,还是记录一下,搭建过程中的一些问题和方法。方便以后总结和翻阅二、简介搭建的平台使用的是Python3.6,未来有空可能考虑加个java版本。前端用的Vue,主体是httprunner2.......
  • Vue的set主要是做什么的
    这个时候可以用this.$set(),给新添加的对象属性,或数组元素添加getter,setter方法简单说即是:当你发现你给对象加了一个属性,在控制台能打印出来,但是却没有更新到视图上时,也许这个时候就需要用到this.$set()这个方法了methods:{btn(){Vue.set(this.student,'age......
  • vue中的data为什么是一个函数
    Vue中的data必须是个函数,因为当data是函数时,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,实例化几次就分配几个内存地址,他们的地址都不一样,所以每个组件中的数据不会相互干扰,改变其中一个组件的状态,其它组件不变。简单来说,就是......
  • Vue项目优化
    代码层面的优化v-if和v-show区分使用场景computed和watch区分使用场景v-for遍历必须为item添加key,且避免同时使用v-if长列表性能优化事件的销毁图片资源懒加载路由懒加载第三方插件的按需引入优化无限列表性能服务端渲染SSRor预渲染......