如何⽤idea开发vue项⽬并添加element-ui依赖
⾸先打开idea，安装vue插件
然后新建javaScript项⽬，选择Vue.js
然后点击finish，它将⾃动下载安装npm,node,cli，中间如果提⽰推荐你连接到下载会更快，输⼊Y即可
node+npm的保存路径默认是C:\Users\xxxx\AppData\Roaming\JetBrains\IntelliJIdea2020.2\node\node-v12.13.1-win-x64如果是⾃⼰下载的话，记住⾃⼰的路径，新建项⽬的时候选择⾃⼰的node路径
接下来需要配置环境变量了，如果需要依赖⼀些第三⽅的东西，是需要敲命令⾏安装的，⽽敲命令⾏必须要配置环境变量，让全局可以访问的到
如果不依赖任何第三⽅的东西，可以忽略这⼀步
环境变量设置好了，尝试添加⼀个依赖，⽐如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 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)
如何下载javascript.addPathPatterns("/**")
.excludePathPatterns("/","/index.html","/img/**","/static/fonts/**","/static/js/**","/static/css/**",                        "/static/favicon.ico")
.excludePathPatterns("/favicon.ico");
}
}
⼤功告成

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。