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. Vmare 无法打开内核设备“\\.\VMCIDev\VMX”: 系统找不到指定的文件。您在安装 VMware Workstation 后是否进行了重新引导?的解决办法

    1.使用管理员省份运行cmd:net start vmx86(切记是要用管理员身份),启动服务成功问题即可解决. 2.若1操作中启动失败,则到Vmare安装目录下搜索vmx86.sys文件,并拷贝到C ...

  2. LeetCode刷题总结-排序、并查集和图篇

    本文介绍LeetCode上有关排序.并查集和图的算法题,推荐刷题总数为15道.具体考点分析如下图: 一.排序 1.数组问题 题号:164. 最大间距,难度困难 题号:324. 摆动排序 II,难度中等 ...

  3. FCC---CSS Flexbox: Align Elements Using the justify-content Property

    Sometimes the flex items within a flex container do not fill all the space in the container. It is c ...

  4. CRM、ERP是什么?

    CRM 全称 Customer Relationship Management,中文意思是客户关系管理. 为什么会有CRM? 因为我们进入到了产能过剩时代,从卖方市场过渡到买方市场,为了将产品卖出去, ...

  5. 百度大脑UNIT3.0解读之对话式文档问答——上传文档获取对话能力

    在日常生活中,用户会经常碰到很多复杂的规章制度.规则条款.比如:乘坐飞机时,能不能带宠物上飞机,3岁小朋友是否需要买票等.在工作中,也会面对公司多样的规定制度和报销政策.比如:商业保险理赔需要什么材料 ...

  6. Mongdb可视化工具Studio 3T的使用

    一.官网地址 https://studio3t.com/ 二.下载和安装 点击DOWNLOAD即可下载 按照自己电脑系统进行选择,然后填写邮箱和选择行业,第一次登录如果不提交不会下载,下载完成是一个z ...

  7. Linux重器之 Vim 实用命令

    Vim 常用的命令 光标定位; hjkl  上下左右移动 0 $ 跳到行首或行尾 gg   shift+G 跳到整个文件的开头行或者结尾行 1G ,2G,3G........NG ,跳到第1.2.3 ...

  8. mysql之行转列与列转行

    mysql之行转列与列转行是数据查询的常见操作,以更好的来展示数据,下面就详细说说怎么实现. 行转列 行转列的话,就是将一条一条的行数据记录转换为一条列数据展示,一般来说是根据某一列来做汇总数据的操作 ...

  9. 【mail邮件系统】linux上安装部署sendmail邮件系统

    sendmail是linux系统中一个邮箱系统,在系统中配置好sendmail就可以直接使用它来发送邮箱.sendmail的配置文件 /etc/mail/sendmail.cf :Sendmail的主 ...

  10. weed3-2.2.细讲插入和更新

    Weed3 一个微型ORM框架(只有0.1Mb哦) 源码:https://github.com/noear/weed3 源码:https://gitee.com/noear/weed3 这篇重点讲讲插 ...