IDEA中Vue3的安装和使用

一、安装node.js

下载链接：https://nodejs.org/zh-cn/，点击长期支持版进行下载，下载完之后安装程序一直点next step即可。

检查是否安装成功：在桌面的任务栏的搜索处搜索命令提示符，点击进入，输入node -v，enter后会出现node的版本信息，再输入npm -v，enter后会出现npm的版本信息。

二、安装淘宝镜像源

配置方法：在命令提示符界面输入npm config set registry=https://registry.npm.taobao.org

检验是否配置成功：在命令提示符界面输入npm config get registry，成功后有淘宝镜像网https://registry.npm.taobao.org/显示。

三、安装cnpm最新稳定版

配置方法：在命令提示符界面输入cnpm install vue@next，enter后出现4个绿✓则配置成功。

四、全局安装 vue-cli脚手架

配置方法：在命令提示符界面输入cnpm install -g @vue/cli。

检验是否配置成功：在命令提示符界面输入vue --version，enter后会出现@vue/cli的版本信息。

五、全局安装一个桥接工具（这样可以使用旧版本的 vue init 功能）

配置方法：在命令提示符界面输入cnpm i -g @vue/cli-init，enter后会出现一系列绿色的installed则配置成功 。

六、安装webpack工具

配置方法：在命令提示符界面输入cnpm install -g webpack，enter后出现Downloading webpack to 地址则配置成功

七、创建项目

1.打开IDEA创建一个 Static Web 项目

2.打开页面左下角的Terminal

3.在界面中输入vue init webpack test（test为项目名，可以自定义），enter后出现Project name，输入你自己定义的项目名，之后出现Project  description A vue.js project，直接enter后出现Vue build standalone再enter，出现Install vue-router？输入Y，enter后出现Use ESLint to lint your code？输入n，enter后出现Set up unit tests输入Y，enter后出现Pick a test runner jest直接enter，出现Setup e2e tests with Nightwatch？输入Y，enter后出现Should we run `npm install` for you after the project has been created？（recommended）npm直接enter。

4.输入cd test进入项目文件夹（test为上面所说的自定义项目名）。

5.输入npm run dev运行项目，运行成功会显示htttp://localhost:8080。

八、配置IDEA的Vue环境

1.点击右上方的file中的setting，选择Editor中的plugins，在里面安装Vue.js插件。

2.选择Editor中的Code Style中的File types，点击里面的HTML，再点Registered Patterns右下方的+，配置HTML支持.vue后缀的文件。

3.选择Languages&Frameworks中的JavaScript，配置JavaScript language version为ECMAScript6。