windows下使用IDEA创建VUE项目 java

1.环境搭建 1.1检测是否安装好nodejs和npm 检测命令

node -v
npm -v

如果没有安装需要先安装

nodejs的下载路径：https://nodejs.org/en/download/

在Windows上安装时务必选择全部组件，包括勾选Add to Path。
安装完成后，在Windows环境下，请打开命令提示符，

文章图片

然后输入node -v，如果安装正常，你应该看到版本号输出：

文章图片

npm是Node.js的包管理工具（package manager），Nodejs的安装程序默认安装npm，在命令提示符或者终端输入npm -v，可以看到类似以下的输出：

文章图片

在cmd中直接使用npm来安装的一些工具的话会比较慢，所以我们使用淘宝的npm镜像：
输入npm i -g cnpm --registry=https://registry.npm.taobao.org，即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了，如果权限不够，请使用管理员运行命令提示符

文章图片

【windows下使用IDEA创建VUE项目】
1.2安装vue-cli，vue脚手架使用如下命令

cnpm i -g vue-cli

文章图片

测试是否安装成功：

vue -V

文章图片

2.项目安装和创建 2.1安装项目首先进入工作目录（如果不在工作目录），使用cd 命令

文章图片

使用脚手架安装项目：

vue init webpack first_vue

控制台显示：

提示目录已存在，是否继续：Y
Project name（工程名）:回车
Project description（工程介绍）：回车
Author：作者名
Vue build（是否安装编译器）:回车
Install vue-router（是否安装Vue路由）：回车
Use ESLint to lint your code（是否使用ESLint检查代码，我们使用idea即可）：n
Set up unit tests（安装测试工具）：n
Setup e2e tests with Nightwatch（测试相关）：n
Should we run `npm install` for you after the project has been created? (recommended)：选择：No, I will handle that myself

2.1初始化项目进入项目目录

cd firstVue

初始化项目

cnpm i

文章图片

运行项目

cnpm run dev

文章图片

浏览器打开：localhost:8080，即可打开vue项目
Ctrl+C退出运行
2.3 配置idea

File - Settings - Languages&Frameworks - JavaScript：修改JavaScript language version为ECMAScript 6，确认
File - Settings - Plugins：搜索vue，安装Vue.js
Run - Edit Configurations...：点击加号，选择npm，Name为Run，package.json选择你工程中的package.json，Command为run，Scripts为dev,然后就可以直接在idea中运行了