搭建vue项目(使用IDEA配置)

写在前面

:好兄弟往这里戳

1.在idea中创建一个static web项目

2.在idea中安装vue.js插件

这里我已经下载好了,下载好以后重启一下idea就可以了.
下面我们来搭建vue环境.

3.搭建vue环境

Node.js官网直通车
安装过程可以默认next进行到底.
用cmd(管理员身份)查看是否安装成功

npm是集成在node中的,所以输入npm -v会显示npm的版本

4.安装cpnm

在cmd(管理员身份)中输入

npm install -g cnpm --registry=http://registry.npm.taobao.org

我之前已经下载过cnpm,所以这次只是更新了一个package.
PS:
笔者是设置下载工具和依赖放在D盘目录下,默认是会放在C盘目录下的
设置方法如下(不想改的可以直接跳到安装vue-cli脚手架构建工具):
首先在要保存的目录下创建两个文件夹:node_cache, node_global

在cmd(管理员运行)中输入以下代码:

npm config set prefix " D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"
(后面的路径要改成自己的)

设置完后可以查看是否设置成功:

npm config ls

5.安装vue-cli脚手架构建工具

cnpm install -g vue-cli

现在环境和工具已经下载完成,接下来是使用vue-cli构建项目

6.构建项目

1. 在cmd(管理员身份运行)中进入到项目当中去(我的位置是在:D:\ideaproject\vuetest2)
   
   vuetest2是我的项目名, 并且不能从C盘直接cd到D盘当中. 要先以 D:的格式进入D盘, 之后再用cd进入
2. 输入命令:

vue init webpack vuetest2

输入之后按下回车会有几个问题,如下(可以直接默认回车)

7.配置项目依赖

上面的问题结束之后,会自动配置项目依赖

8.运行项目

在配置完依赖后项目下会多出来一个同名的文件夹,要进入到这个新相同文件夹下
在cmd(管理员身份下),输入以下命令:

npm run dev

成功!

9.在idea中配置运行

运行结果

成功!