idea 运行vue项目

1、idea中安装vue.js 点击File–>Settings–>Plugins–>搜索vue.js插件,下面的图中我已经安装好了
在这里插入图片描述在这里插入图片描述
2、到node官网下载安装node.js 官方下载链接.
在这里插入图片描述
node.js 安装过程 傻瓜式安装,直接下一步就可以了

3、配置node.js 环境
打开cmd命令窗口 输入node -v npm -v 查看版本
在这里插入图片描述
node.js 安装路径D:\Program Files\nodejs
在安装路径新建 “node_global” “node_cache”在这里插入图片描述
npm config set prefix “D:\Develop\nodejs\node_global”
npm config set cache "D:\Develop\nodejs\node_cache"

在cmd 运行两个命令
在这里插入图片描述
这里的环境配置主要配置的是npm安装的全局模块所在的路径,以及缓存cache的路径,之所以要配置,是因为以后在执行类似:npm install express [-g] (后面的可选参数-g,g代表global全局安装的意思)的安装语句时,会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中,占C盘空间。

4、配置环境
关闭cmd窗口,“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”-“新建”
在这里插入图片描述
在【系统变量】下新建【NODE_PATH】,输入【D:\Program File\nodejs\node_modules】,将【用户变量】下的【Path】修改为【D:\Program Files\nodejs\node_global】
在这里插入图片描述
在这里插入图片描述
5、测试
在cmd命令下执行 npm install webpack -g 然后安装成功后可以看到自定义的两个文件夹已生效
在这里插入图片描述
webpack 也已安装成功,执行 npm webpack -v 可以看到所安装webpack的版本号:
在这里插入图片描述
6、安装完node以后,cmd进入vue项目根路径下。
运行命令:npm install (下载必须的依赖,如果报错了就是node环境有问题,查百度重新搭环境)
在这里插入图片描述
之后可以发现Vue项目下出现了node_modules
在这里插入图片描述
7、在idea中导入vue项目并运行
8、导入成功,选择
在这里插入图片描述
进入点击“+”–>“npm“
在这里插入图片描述

项目运行
在这里插入图片描述
浏览器输入网址 http://localhost:8888运行成功

Logo

前往低代码交流专区

更多推荐