一、下载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项目结束!!!
如有错误之处,请指正!!!