[SpringBoot+VueJs] 3.1 VueJS 2.0 + Webpack工程介绍

目录

1. 环境搭建
2. 后端
   2.1 数据库设计
   2.2 SpringBoot + Mybatis
   2.3 SpringBoot+RestfulAPI
3. 前端
   3.1 VueJS 2.0 + Webpack工程介绍
   3.2 Admin-LTE介绍及使用
   3.3 VueJS一些基础知识
   3.4 项目中用到的和VueJS的开源组件

前言

官方基于webpack提供了两种项目模板，分别是vue-webpack-simple模板和vue-webpack模板，我这里用的是vue-webpack模板。别问我为什么，我梦想着我的项目会成为个大项目（:P）

这里对没有接触过webpack的同学有点生涩。这样吧，简单来说webpack我理解的就是前段的打包工具。如果我们的工程的,CSS,JS太多，是不利于管理的。webpack会打包压缩成几个简单的JS CSS文件。既提升了浏览器加载的速度，又可以保密js源码

Webpack简介

Webpack是当下最热门的前端资源模块化管理和打包工具，它可以将很多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源，还可以将按需加载的模块进行代码分割，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

下图是官方对Webpack的简介，通过这幅图也不难看出，一些相互依赖的模块文件，会被打包成一个或多个js文件，可以减少HTTP的请求次数（反正我只记住了这一条）。

image.png

webpack主页： http://webpack.github.io/

环境准备

Node&NPM装好，如图所示：

image.png

然后安装vue-cli这个工具：

npm install -g vue-cli

https://github.com/vuejs/vue-cli

生成vue-webpack模板

这个可以参考第一章环境准备讲的内容
文件目录结构如下:

├── build/                      # webpack config files
│   └── ...
├── config/                     
│   ├── index.js                # main project config
│   └── ...
├── src/
│   ├── main.js                 # app entry file
│   ├── App.vue                 # main app component
│   ├── components/             # ui components
│   │   └── ...
│   └── assets/                 # module assets (processed by webpack)
│       └── ...
├── static/                     # pure static assets (directly copied)
├── test/
│   └── unit/                   # unit tests
│   │   ├── specs/              # test spec files
│   │   ├── index.js            # test build entry file
│   │   └── karma.conf.js       # test runner config file
│   └── e2e/                    # e2e tests
│   │   ├── specs/              # test spec files
│   │   ├── custom-assertions/  # custom assertions for e2e tests
│   │   ├── runner.js           # test runner script
│   │   └── nightwatch.conf.js  # test runner config file
├── .babelrc                    # babel config
├── .editorconfig.js            # editor config
├── .eslintrc.js                # eslint config
├── index.html                  # index.html template
└── package.json                # build scripts and dependencies

官方参考如下：https://vuejs-templates.github.io/webpack/structure.html

运行

直接 npm run dev即可。和第一章一样，可以得到下图所示页面：

image.png

打包

npm run build

但是我们工程的打包是通过mvn的，然后第一章也讲到通过mvn插件的形式已经集成run build了。所以这一步会在后面工程搞完，打包的时候执行。

最后，希望你大致理解到这里。

源码

Git Hub Demo