安装node.js及idea配置运行vue项目

  • Post author:
  • Post category:vue



一、下载node.js,搭建环境

1、可去官网下载(

Node.js

下载后是.msi格式的文件

2、双击安装,一直下一步即可。

3、查看是否安装成功


以管理员运行cmd

,输入“node -v”、“npm -v”,查看node和npm的版本号,如下图显示则安装成功。

注:npm包管理器是集成在node中的

二、安装cnpm(

以管理员运行cmd状态下

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

三、安装vue-cli脚手架构建工具(

以管理员运行cmd状态下

在命令行中运行命令  cnpm install -g vue-cli,然后等待安装完成,安装完成后我们就搭建好了,接下来就可以使用vue-cli来构建项目了。如下图:

四、创建vue项目并启动

1、通过  cd 到项目目录中去,在命令行中运行命令  vue init webpack xxxx


注:命令的意思是初始化一个项目,项目名称是xxxx,其中webpack是构建工具,也就是整个项目时基于webpack;




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

2、项目的根目录下面会自动生成 package.json  文件

3、创建好之后用idea打开 “xxxx”  项目,加载完之后,在idea中安装node.js插件,在 “File” –>”Settings”  –> “Plugins” 中搜索安装(我的已经是安装完的状态了),安装好后会让重启,重启后即可使用(我的重启后会出现关于证书的弹框,我点击接受了,不然每次启动都会出现)


4、idea配置启动项

点击上图会出现下图,按照序号1到5依次进行,之后点击 “Apply” , “OK” 即可。

序号解释:序号3为启动的名称;序号4会自动填充,不用替换,默认即可;序号5为之前电脑安装nodejs的路径(此项下拉点击最下面的  “Add” 添加)

5、点击运行

打开浏览器访问 :

http://localhost:8081/#/

出现下图则表示成功

到此,安装node.js及idea配置运行vue项目结束!!!

如有错误之处,请指正!!!



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