1. 下载node.js

在搭建vue的开发环境之前,先下载node.js,下载地址:https://nodejs.org/en/
https://blog.csdn.net/antma/article/details/86104068

2. 安装

下载好后安装,傻瓜式点下一步直到finish即可
https://blog.csdn.net/antma/article/details/86104068

3. 检测安装是否成功

安装成功后,一般不需要自己手动去配置环境变量,此时可以在命令行输入node -v 和 npm -v 分别查看node和npm的版本号;

4. 配置npm在安装全局模块时的路径和缓存cache的路径

在安装路径下新建两个文件夹,分别为:node_global和node_cache


  • 然后在命令行中执行如下两个命令:(报错时是因为权限不足,需要使用管理员身份打开cmd再运行下面命令)
  • npm config set prefix "C:\Program Files\nodejs\node_global"
  • npm config set cache "C:\Program Files\nodejs\node_cache"
    执行成功后:
    https://blog.csdn.net/antma/article/details/86104068
    然后在环境变量 -> 系统变量中新建一个变量名为 “NODE_PATH”, 值为“D:\Program Files\nodejs\node_modules”,如下图:

    最后编辑用户变量里的Path,将相应npm的路径改为:C:\Program Files\nodejs\node_global

    配置完成!

    5. 测试

    在cmd命令下执行 npm install webpack -g 然后安装成功后可以看到自定义的两个文件夹已生效:
    https://blog.csdn.net/antma/article/details/86104068
    webpack 也已安装成功,执行 npm webpack -v 可以看到所安装webpack的版本号:
    https://blog.csdn.net/antma/article/details/86104068

    6. 在idea中导入vue项目并运行

    setting-->plugins-->搜索vue-->选择第一个-->installed


    导入vue项目
    然后选择

    package.json为当前项目目录下的package.json文件,scripts 选择 dev

    继续添加npm
    前面一样,scripts选择bulid

    选择项目,点击

虽然会报 Opening index.html over file:// won't work.这个错误,但是好像没啥影响,在网上搜了一圈也没搞清楚啥原因
点击
输入 npm run dev

运行结果

参考博客:https://blog.csdn.net/antma/article/details/86104068

idea中导入别人的vue项目并运行的更多相关文章

  1. Eclipse中导入github上的项目

    Eclipse中导入github上的项目 转载至: http://blog.csdn.net/hil2000/article/details/8566456 1.首先在github.com上申请一个账 ...

  2. 第六十九篇:vue项目的运行过程

    好家伙, 1.vue的目录结构分析 来看看项目的目录 (粗略的大概的解释) 2.vue项目的运行流程 在工程化项目中,vue要做的事情很单纯:通过main.js把App.vue渲染到index.htm ...

  3. 4.eclipse中导入别人用的源代码问题

    最近在导入别人用的源代码问题时,出现两个问题: 问题一:提示无法解析导入,如下图: 解决方法:删除项目下的module-info.java文件即可,或者在创建项目时将创建module-info.jav ...

  4. Sumblime Text3中使用vue-cli创建vue项目,代码不高亮,解决

    问题如下:在Sumblime Text3中打开vue-cli常见的项目,代码一片灰色 解决如下: 第一步:下载文件Vue components  链接 GitHub - vuejs/vue-synta ...

  5. 关于导入别人的web项目,tomcat无法显示的问题

    这两天头大,老师讲了javaWeb项目,讲完就给我们发了代码,我就想导入直接用,结果它tomcat的add and remove 里一直没有这个项目名字 刚导入还报错,这个可能我的版本太低了,兼容不了 ...

  6. vue项目怎么运行

    因为要做毕业设计 ,准备用vue来做前端的界面.发现不知如何运行vue的项目,很尴尬.通过查阅网上教程,因此把环境搭建过程记录下来,以备不时之需.   言归正传~~   首先,列出来我们需要的东西:  ...

  7. vue 项目的运行与 打包

    1.vue init webpack 2.npm install axios 3.npm run dev  运行项目 4.npm run build 打包项目 会生成一个dist 文件夹,我们只需要把 ...

  8. 在github上怎样克隆vue项目及运行

    长时间不做vue项目,今天看vue项目运行时有些指令忘记了,在这里写下相关指令 .克隆已有项目,一般情况项目中的README.md写的是项目运行步骤,一般项目的运行如下 克隆项目 git clone ...

  9. 使用webpack打包后的vue项目如何运行(express)

    我们知道使用webpack打包vue项目后会生成一个dist文件夹,dist文件夹下有html文件和其他css.js以及图片等,那么打包后的文件该如何正确运行呢? 倘若直接打开html文件,会报如下错 ...

随机推荐

  1. 大数据学习笔记——Hbase高可用+完全分布式完整部署教程

    Hbase高可用+完全分布式完整部署教程 本篇博客承接上一篇sqoop的部署教程,将会详细介绍完全分布式并且是高可用模式下的Hbase的部署流程,废话不多说,我们直接开始! 1. 安装准备 部署Hba ...

  2. Java做成Zip文件,Java实现压缩文件

    import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; import ...

  3. laravel55

    增//save返回true false$res = new member();res->username = 'a';$res->password = 'b';dump($res-> ...

  4. java基础- Java编程规范与注释

    一 前言 java编程规约是指在java代码编写过程中通俗的约定:通常我们是要遵守这些规范:这好比我们在生活中要遵守的道德准则,如果你做的事情超出了道德的底线,那就有可能会受到社会抨击:在java编程 ...

  5. [ASP.NET Core 3框架揭秘] 依赖注入[8]:服务实例的生命周期

    生命周期决定了IServiceProvider对象采用怎样的方式提供和释放服务实例.虽然不同版本的依赖注入框架针对服务实例的生命周期管理采用了不同的实现,但总的来说原理还是类似的.在我们提供的依赖注入 ...

  6. 原生JS实现移动端轮播图

    功能描述: 自动无缝轮播图片,底部小圆点跟图片保持一致:手指左右移动轮播图,移动距离大于50px播放下一张(或上一张),小于50px则回弹 具体功能实现: 1.定时器 自动轮播图片 先声明一个inde ...

  7. 使用shell脚本删除30天以前的文件

    #!/bin/bashlocation=/root/rmfind $location -mtime +30 -print | xargs rm -rf //-mtime是距离上一次修改时间 -prin ...

  8. jQuery-验证码倒计时的实现

    点击发送验证码,通常需要加入倒计时功能,HTML如下: <center class='block captchaArea'> <input class="input pwd ...

  9. 技术分享预告丨k3s在边缘计算中的应用实践

    技术分享是在[Rancher官方微信技术交流群]里以图文直播+QA实时互动的方式,邀请国内已落地经验的公司或团队负责人分享生产落地的最佳实践.记得添加微信小助手(微信号:rancher2)入群,实时参 ...

  10. Go 开发关键技术指南 | 为什么你要选择 GO?(内含超全知识大图)

    作者 | 杨成立(忘篱) 阿里巴巴高级技术专家 关注"阿里巴巴云原生"公众号,回复 Go 即可查看清晰知识大图! 导读:从问题本身出发,不局限于 Go 语言,探讨服务器中常常遇到的 ...