idea中创建vue项目

VUE项目搭

一、环境搭建

1.下载安装包

Node.js 官方网站下载：https://nodejs.org/en/download/

2.安装
双击打开安装，下一步下一步即可（我的安装路径为“C:\Program Files\nodejs”）：

安装成功，测试安装是否成功，运行CMD，分别输入node -v 和 npm -v 分别查看node和npm的版本号

安装完成后系统目录如图所示（其中，npm随安装程序自动安装，作用就是对Node.js依赖的包进行管理）：

 

 

3.配置全局
配置npm在安装全局模块时的路径和缓存cache的路径

因为在执行例如npm install webpack -g等命令全局安装的时候，默认会将模块安装在C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中，不方便管理且占用C盘空间，

所以这里配置自定义的全局模块安装目录，在node.js安装目录下新建两个文件夹 node_global和node_cache，如图所示：

 然后在cmd命令下执行如下两个命令：

npm config set prefix "C:\Program Files\nodejs\node_global"

npm config set cache "C:\Program Files\nodejs\node_cache"

　　执行命令，如下图所示：

 

执行完后，配置环境变量，如下：

“环境变量” -> “系统变量”：新建一个变量名为 “NODE_PATH”， 值为“C:\Program Files\nodejs\node_modules”
“环境变量” -> “用户变量”：编辑用户变量里的Path，将相应npm的路径（“C:\Users\用户名\AppData\Roaming\npm”）改为：“C:\Program Files\nodejs\node_global”

 

• 配置完成

4.测试

更换为淘宝的源

 npm config set registry http://registry.npm.taobao.org

　　使用 npm info express 验证

 在cmd命令下执行 npm install webpack -g 安装webpack，如下图所示：

 检查安装版本号,是否安装成功

npm webpack -v

　　如下图成功了

 

二、项目的创建

1、准备

1.1、插件

在插件库中添加vue.js插件

 

 

1.2、检查

在IDEA中打开Terminal编辑器（Alt+F12），检查node.js和npm是否已经安装完成

node -v

npm -v

　　

1.3、安装vue

npm install vue

　　

1.4、全局安装 vue-cli

npm install --global vue-cli

　　

1.5、创建项目

创建一个基于 webpack 模板的新项目，my-project为项目名称，我这边是vue01

vue init webpack my-project（项目名）

　　这里需要进行一些配置，默认回车即可

 也可以通过idea创建vue项目

 修改项目 package.json配置文件

"scripts": {
  "dev": "vue-cli-service serve"
},

 

 

进入项目安装并运行

cd vue01

npm install

npm run dev

　　

原文链接：https://blog.csdn.net/qq_45609297/article/details/108768648