springboot整合vue

淡淡的烟草味﹌ 2023-07-09 05:22 1阅读 0赞

# 步骤 #

1.  创建springboot项目
2.  在resources目录下新建一个vue目录
3.  在vue目录下新建vue项目，或者把存在的vue项目copy到这个目录下都可以  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4OTg4OTY5_size_16_color_FFFFFF_t_70]
4.  设置vue打包后输出的目录和vue打包后静态资源目录，在vue目录下（vue项目根目录）新建vue.config.js

module.exports = { 
      // 设置打包后输出的目录
      outputDir: '../static',
      // 设置打包后静态资源目录
      assetsDir: 'static',
      devServer: { 
        // 设置自动打开浏览器
        open: true,
        // 端口号
        port: 9999
      }
    }

1.  执行打包命令，会自动把vue项目打包输出到resources目录下的static目录中

npm run build

1.  建议vue项目还是使用vs code编辑

# IDEA添加对vue的支持 #

设置支持es6  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4OTg4OTY5_size_16_color_FFFFFF_t_70 1]  
下载vue.js插件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4OTg4OTY5_size_16_color_FFFFFF_t_70 2]  
设置vue文件模版  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4OTg4OTY5_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4OTg4OTY5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200227221852815.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4OTg4OTY5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4OTg4OTY5_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200227221347828.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4OTg4OTY5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4OTg4OTY5_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200227221158278.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4OTg4OTY5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4OTg4OTY5_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200227221232904.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI4OTg4OTY5,size_16,color_FFFFFF,t_70