windows 10 及IDEA运行本地vue前端项目

本人是做Java后端的,假期期间自己写项目,后端使用spring boot,前端使用vue.js。下面记录下自己运行前端项目,毕竟不是前端工程师,有什么错的地方欢迎指正。

安装node.js 可以去官网下载:安装过程就很简单,直接下一步就行。

安装完成后,打开命令窗口cmd,以管理员的身份运行,输入 node -v 如果出现版本号表示安装成功,

 

 

 

 

在命令行中输入npm install -g cnpm --registry=http://registry.npm.taobao.org然后等待安装,安装完成之后,我们就可以用cnpm代替npm来安装

在命令行中运行命令cnpm install -g vue-cli,然后等待安装完成,通过以上三步,我们的环境和工具都准备好了,接下来就开始使用vue-cli来构建项目。

如果安装成功,执行上述命令报错:cnpm 不是内部命令......,解决办法是需要将“cnpm”文件夹和“npm”文件夹放在同一目录下,而“cnpm”、“cnpm.cmd”复制到同“npm”、“npm.cmd”一个目录下即可。

我是已经在GitHub上下载的项目(因此不需要这一步,不需要构建,直接运行就行了)需要在命名行中,cd 到项目目录中去

然后需要输入命令:vue init webpack projectname (这里命令的意思是初始化一个项目,项目名称是projectname,其中webpack是构建工具,

也就是整个项目时基于webpack的)

运行命令初始化的时候会让用户输入几个基本的选项,如项目名称、描述、作者等信息,可以直接回车默认就可以了。

如果提示vue不是内部命令 ......解决办法:配置环境变量path,找到vue.cmd所在的目录一般在安装目录nodejs目录下的node_global目录下,将路径添加在系统变量的path中即可。

一般遇到 * 不是内部命令...一般是环境变量没有配好。

执行完上述操作,在项目的根目录有一个package.json,这个文件中列出了项目需要安装依赖资源,首先需要cd到项目目录中去,然后输入cnpm install 等待安装。

运行命令npm run dev会用热加载的方式运行我们的应用,热加载可以让我们在修改完代码后不用手动刷新,浏览器就能实时看到修改后的效果

 

也可以使用idea编辑器,首先idea安装插件,node.js

 

我的已经安装了。

在idea点击 Run ,下拉菜单中点击edit configurations配置,添加一个npm如下图。

点击apply,再点击OK。

点击运行。我这是下载好的vue项目,运行即可。

 

 


版权声明:本文为weixin_40596127原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。