spring boot+iview 前后端分离架构之前端工程的构建以及IVIEW的引入（一）

小咪咪 2022-02-15 05:53 210阅读 0赞

### iview工程构建 ###

*  公众号
 *  写在博客前
 *   *  创建vue工程
     *  基于vue工程引入iview框架

# 公众号 #

![在这里插入图片描述][20191218155125364.jpg]  
大家可以直接微信扫描上面的二维码关注我的公众号，然后回复【bg01】 里面就会给到源代码的下载地址同时会附上相应的视频教程，并定期在我的公众号上给大家推送相应的技术文章，欢迎大家关注我的公众号。

# 写在博客前 #

在大家开始看本系列博客之前，默认大家已经掌握了spring boot、vue、iview、html、css3、js、npm、cnpm、webpack、docker、maven、IDEA开发工具等知识点。  
若大家对以上的知识点还不熟悉，建议先分别去熟悉以上的知识以下是学习这些知识的一些书籍和地址：

1.spring boot 学习的书籍《**java EE开发的颠覆者 spring boot 实战**》、官方文档：https://spring.io/projects/spring-boot/。  
2.vue学习的书籍《**vue.js实战**》、官方文档：https://cn.vuejs.org/。  
3.iview学习的官方文档：https://www.iviewui.com/docs/guide/install。  
4.docker学习的书籍《**docker实战**》、docker官方文档：https://www.docker.com/  
5.其他知识就大家自行去百度学习了。  
有的小伙伴反应无法使用IDEA开发工具来构建我们的vue工程，这边给大家写了一个CMD的方式来创建工程：  
[https://blog.csdn.net/linzhefeng89/article/details/97100476][https_blog.csdn.net_linzhefeng89_article_details_97100476]

## 创建vue工程 ##

首先我们打开我们的IDEA，然后我们创建一个空的项目空间如下【file=>new=>project=>Empty Project】：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]  
接着点击next，然后创建我们这个项目空间的名字，我们这边将这个项目空间命名为bg-admin，创建完成如下所示：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]  
接着我们创建一个modules【file=>new=>module=>static web=>vue.js】如下所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 2]  
然后大家按着自己的要求去创建自己的vue项目，以下我们按着这些要求进行项目的创建：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 3]  
接着点击next，这时候vue-cli就会帮助我们构建我们的项目了，接下来大家按着这几个点去构建自己的项目  
**Project name：bg-admin-web  
Project description：这是一个前后端分离的架构例子  
Author：林泽锋  
Vue build：选择第一个  
Install vue-router?：yes  
Use ESLint to lint your code?：No  
Set up unit tests：No  
Setup e2e tests with Nightwatch?：No  
Should we run `npm install` for you after the project has been created? (recommended)：no**  
到此处我们已经完成了我们vue项目的搭建了，那么接下来我们就试着把我们这个项目启动起来，在启动之前我们需要先安装好依赖，我们直接用IDEA的terminal进入到我们的工程目录，直接执行cnpm install命令；执行成功以后我们接着执行cnpm run dev，然后打开浏览器输入https:\\localhost:8080会看到如下的页面，则说明我们的vue项目就创建完成了【若对以上的命令有任何的不了解，请自行百度解决】。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 4]

## 基于vue工程引入iview框架 ##

接着打开我们的bg-admin-web工程找到我们的package.json文件，然后将文件里面的dependencies和devDependencies的依赖改为如下的依赖：

"dependencies": {
        "axios": "^0.15.3",
        "clipboard": "^2.0.1",
        "echarts": "^3.4.0",
        "font-awesome": "^4.7.0",
        "iview": "^3.4.0",
        "iview-area": "^1.5.17",
        "js-cookie": "^2.2.0",
        "vue": "^2.5.2",
        "vue-i18n": "^7.8.0",
        "vue-router": "^3.0.1",
        "vuex": "^2.2.1"
      },
      "devDependencies": {
        "autoprefixer": "^7.1.2",
        "babel-core": "^6.22.1",
        "babel-eslint": "^8.2.1",
        "babel-helper-vue-jsx-merge-props": "^2.0.3",
        "babel-loader": "^7.1.1",
        "babel-plugin-syntax-jsx": "^6.18.0",
        "babel-plugin-transform-runtime": "^6.22.0",
        "babel-plugin-transform-vue-jsx": "^3.5.0",
        "babel-preset-env": "^1.3.2",
        "babel-preset-stage-2": "^6.22.0",
        "chalk": "^2.0.1",
        "copy-webpack-plugin": "^4.0.1",
        "css-loader": "^0.28.0",
        "eslint": "^4.15.0",
        "eslint-config-standard": "^10.2.1",
        "eslint-friendly-formatter": "^3.0.0",
        "eslint-loader": "^1.7.1",
        "eslint-plugin-import": "^2.7.0",
        "eslint-plugin-node": "^5.2.0",
        "eslint-plugin-promise": "^3.4.0",
        "eslint-plugin-standard": "^3.0.1",
        "eslint-plugin-vue": "^4.0.0",
        "extract-text-webpack-plugin": "^3.0.0",
        "file-loader": "^1.1.4",
        "friendly-errors-webpack-plugin": "^1.6.1",
        "html-webpack-plugin": "^2.30.1",
        "node-notifier": "^5.1.2",
        "optimize-css-assets-webpack-plugin": "^3.2.0",
        "ora": "^1.2.0",
        "portfinder": "^1.0.13",
        "postcss-import": "^11.0.0",
        "postcss-loader": "^2.0.8",
        "postcss-url": "^7.2.1",
        "rimraf": "^2.6.0",
        "semver": "^5.3.0",
        "shelljs": "^0.7.6",
        "uglifyjs-webpack-plugin": "^1.1.1",
        "html-loader": "^0.5.1",
        "iview-loader": "^1.0.0",
        "url-loader": "^0.5.8",
        "vue-loader": "^13.3.0",
        "vue-style-loader": "^3.0.1",
        "vue-template-compiler": "^2.5.2",
        "webpack": "^3.6.0",
        "webpack-bundle-analyzer": "^2.9.0",
        "webpack-dev-server": "^2.9.1",
        "webpack-merge": "^4.1.0",
        "autoprefixer-loader": "^3.2.0",
        "babel": "^6.23.0",
        "babel-plugin-transform-object-rest-spread": "^6.26.0",
        "babel-preset-es2015": "^6.9.0",
        "babel-runtime": "^6.11.6",
        "eslint-plugin-html": "^1.7.0",
        "less": "^2.7.3",
        "less-loader": "^4.0.5",
        "style-loader": "^0.19.1",
        "vue-hot-reload-api": "^2.2.4",
        "vue-html-loader": "^1.2.3"
      }

然后重新加载我们的依赖，在bg-admin-web底下执行cnpm install，依赖下载完成以后我们打开我们的main.js增加以下的import：

import iView from 'iview'
    import 'iview/dist/styles/iview.css'
    
    Vue.use(iView)

接着打开我们的App.vue在div里面增加以下的iview的组件验证：

<Button type="primary">Primary</Button>

然后我们执行cnpm run dev，接着我们访问http://localhost:8080，若看到如下页面则说明我们已经成功引入了iview前端框架：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 5]  
下一篇文章地址：[spring boot+iview 前后端分离架构之登陆页面以及国际化的实现（二）][spring boot_iview]

[20191218155125364.jpg]: /images/20220215/47ad7a36b89b4cf9b25660453cff3e2a.png
[https_blog.csdn.net_linzhefeng89_article_details_97100476]: https://blog.csdn.net/linzhefeng89/article/details/97100476
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]: /images/20220215/f4331d0a45b74fb4ab20b4de457a8d7f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]: /images/20220215/900591de84dd45a4ae2765dac3ff1fc2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 2]: /images/20220215/0f5d3c485f2548bab9b31e2dc60b1bd0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 3]: /images/20220215/16dd6f45222242449e978c48ed464312.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 4]: /images/20220215/165f44ed83a4445e89c739fa1151f255.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 5]: /images/20220215/f477190bceec4cb19472488e3947ea97.png
[spring boot_iview]: https://linzhefeng23.blog.csdn.net/article/details/89501739