jeecgboot vue2使用 - CSDN文库

JeecgBoot是一个基于SpringBoot的快速开发平台，它提供了许多常用的功能例如代码生成、权限管理、数据字典、日志管理等等。而Vue2是一种流行的JavaScript框架，它可以用来构建现代化的Web应用程序。在JeecgBoot中使用Vue2可以帮助我们更快速地开发现代化的Web应用程序。下面是使用JeecgBoot和Vue2开发Web应用程序的基本步骤： 1. 创建一个JeecgBoot项目，可以使用JeecgBoot的代码生成器来创建一个基础的项目。 2. 在JeecgBoot项目中集成Vue2，可以使用npm包管理器来安装Vue2。在项目的根目录下执行以下命令： ``` npm install vue ``` 3. 创建Vue2组件，可以在JeecgBoot项目的前端资源目录下创建一个新的Vue2组件。例如，在src/main/resources/webapp/vue/components目录下创建一个名为HelloWorld.vue的文件，内容如下： ``` <template> <div> <h1>Hello {{ name }}!</h1> </div> </template> <script> export default { data() { return { name: 'World' } } } </script> ``` 4. 在JeecgBoot项目中使用Vue2组件，可以在JeecgBoot的JSP页面中使用Vue2组件。例如，在src/main/resources/templates目录下创建一个名为index.jsp的文件，内容如下： ``` <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %> <%@ taglib prefix="security" uri="http://www.springframework.org/security/tags" %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JeecgBoot Vue2 Demo</title> <script src="/static/js/vue.min.js"></script> </head> <body> <div id="app"> <hello-world></hello-world> </div> <script src="/static/js/app.js"></script> </body> </html> ``` 注意，在页面中引入Vue2的JavaScript文件，以及Vue2组件的JavaScript文件。 5. 编译Vue2组件，可以使用Webpack来编译Vue2组件。在项目的根目录下执行以下命令： ``` npm install webpack webpack-cli vue-loader vue-template-compiler css-loader style-loader --save-dev ``` 然后在项目的根目录下创建一个名为webpack.config.js的文件，内容如下： ``` const path = require('path'); const VueLoaderPlugin = require('vue-loader/lib/plugin'); module.exports = { mode: 'development', entry: './src/main/resources/webapp/vue/index.js', output: { path: path.resolve(__dirname, 'src/main/resources/static/js'), filename: 'app.js' }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' }, { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] }, plugins: [ new VueLoaderPlugin() ] }; ``` 然后在项目的src/main/resources/webapp/vue目录下创建一个名为index.js的文件，内容如下： ``` import Vue from 'vue'; import HelloWorld from './components/HelloWorld.vue'; new Vue({ el: '#app', components: { 'hello-world': HelloWorld } }); ``` 6. 编译Vue2组件，可以在项目的根目录下执行以下命令： ``` ./node_modules/.bin/webpack --config webpack.config.js ``` 这将会编译Vue2组件，并将编译结果输出到src/main/resources/static/js目录下。 7. 运行JeecgBoot应用程序，可以使用以下命令来启动JeecgBoot应用程序： ``` mvn spring-boot:run ``` 访问http://localhost:8080即可看到Vue2组件在JeecgBoot应用程序中的效果。这就是使用JeecgBoot和Vue2开发Web应用程序的基本步骤。

阅读全文

相关推荐

CSDN会员

开通CSDN年卡参与万元壕礼抽奖

海量 VIP免费资源千本正版电子书商城会员专享价千门课程&专栏

全年可省5,000元立即开通