如何用idea开发vue项目并添加element-ui依赖

首先打开idea，安装vue插件

然后新建javaScript项目，选择Vue.js

然后点击finish，它将自动下载安装npm,node,cli，中间如果提示推荐你连接到taobao.org下载会更快，输入Y即可

node+npm的保存路径默认是C:UsersxxxxAppDataRoamingJetBrainsIntelliJIdea2020.2 ode ode-v12.13.1-win-x64

如果希望自己下载的话，前往下载最新的node+npm

如果是自己下载的话，记住自己的路径，新建项目的时候选择自己的node路径

接下来需要配置环境变量了，如果需要依赖一些第三方的东西，是需要敲命令行安装的，而敲命令行必须要配置环境变量，让node.exe全局可以访问的到

如果不依赖任何第三方的东西，可以忽略这一步

环境变量设置好了，尝试添加一个依赖，比如element-ui

然后打开main.js，添加

import ElementUI from element-ui;
import element-ui/lib/theme-chalk/index.css;

Vue.use(ElementUI);

就可以在.vue文件中使用el-xxxx了

接下来添加打包的命令

点击Edit Configurations

从下拉列表中选择build，点击ok

点击运行npm serve的时候项目就运行起来了，默认是http://localhost:8080/

点击运行npm build的时候就可以打包了，打包完之后项目会多出一个文件夹dist，文件夹中的内容需要全部复制出来，粘贴到springboot项目的static下

这时候我们需要打开index.html文件，如果项目位置是tomcat/webapps/ROOT，所有地址添加static路径前缀，如果项目位置是tomcat/webapps/demo，所有地址添加/demo/static路径前缀

此时需要做一下web的静态资源配置

@Configuration
public class ServiceConfig implements WebMvcConfigurer {

    // 这个方法是用来配置静态资源的，比如html，js，css，等等
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
    }

}

这样把项目运行起来，在浏览器输入localhost:8080就可以访问到自己写的web页面了

如果项目有拦截器设置，那么需要设置一下拦截器

@Configuration
public class ServiceConfig implements WebMvcConfigurer {

    private LoginInterceptor loginInterceptor;

    @Autowired
    public void setLoginInterceptor(LoginInterceptor loginInterceptor) {
        this.loginInterceptor = loginInterceptor;
    }

    // 这个方法是用来配置静态资源的，比如html，js，css，等等
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
    }

    // 这个方法用来注册拦截器，我们自己写好的拦截器需要通过这里添加注册才能生效
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(loginInterceptor)
                .addPathPatterns("/**")
                .excludePathPatterns("/","/index.html","/img/**","/static/fonts/**","/static/js/**","/static/css/**",
                        "/static/favicon.ico")
                .excludePathPatterns("/favicon.ico");
    }

}

大功告成