【前后不分离之】vue+elementui+webpack+springboot 单页面 应用

前端开发：vue+elementui+webpack技术栈

先讲套路：

1. elementui官网找到项目模板：https://github.com/ElementUI/element-starter pull 到本地
2. npm install   npm run build后 得到了项目的静态文件
3. 新建springboot web项目。

   
   
   	4.0.0
   
   	com.wqd
   	learn
   	0.0.1-SNAPSHOT
   	jar
   
   	learn
   	Demo project for Spring Boot
   
   	
   		org.springframework.boot
   		spring-boot-starter-parent
   		1.4.3.RELEASE
   		 
   	
   
   	
   		UTF-8
   		UTF-8
   		1.8
   	
   
   	
   		
   			org.springframework.boot
   			spring-boot-starter
   		
   
   		
   			org.springframework.boot
   			spring-boot-starter-test
   			test
   		
   		
               org.springframework.boot
               spring-boot-starter-web
           
             
               javax.servlet  
               jstl  
               1.2  
               runtime  
             
   	
   
   	
   		
   			
   				org.springframework.boot
   				spring-boot-maven-plugin
   			
   			
   			
   			
   				org.apache.maven.plugins
   				maven-resources-plugin
   				
   					
   						copy-resources
   						validate
   						
   							copy-resources
   						
   						
   							src/main/resources/META-INF/resources
   							
   							
   								
   									../demo-ui/dist
   									false
   								
   							
   						
   						
   					
   				
   			
   			
   		
   	
   
   
   
   

   这里最关键的就是这个插件。这个插件是我们 分开开发的关键。使用这个插件。我们就不需要管怎么把静态资源放到 springboot里面。

4. 【配置的静态资源路径就是上面的,npm run build生成静态文件的路径。】

配置一个 webconfig:

@Configuration
public class SpringWebMvcConfig  extends WebMvcConfigurerAdapter{

	@Override
	public void addViewControllers(ViewControllerRegistry registry) {
		registry.addViewController("/vue").setViewName("/index.html");
	}
	@Bean
	public ViewResolver viewResolver() {
		InternalResourceViewResolver viewResolver = new InternalResourceViewResolver();
		viewResolver.setPrefix("/");
		viewResolver.setRedirectHttp10Compatible(false);
		viewResolver.setContentType("text/html;charset=UTF-8");
		
		viewResolver.setViewClass(JstlView.class);
		return viewResolver;
	}
	public void addResourceHandlers(ResourceHandlerRegistry registry) {
		super.addResourceHandlers(registry);
	}
}

重要的配置: addViewControllers  配置访问index.html的访问路径。

启动项目： 访问对应的 http://localhost:8080/tc/vue 一个 vue+springboot项目搭建完成。

【第一次写，布局，颜色，语言，组织的不好。望见谅。但是 vue+elementui+webpack+ springboot/springmvc  之 前后分离/前后不分离 这种模式很爽。有什么不会的可以

可以随时问我。后续我会开始 vue + 后端开发系列博客。

】