目錄

1. 環(huán)境搭建
2. 后端
   2.1 數(shù)據(jù)庫設(shè)計
   2.2 SpringBoot + Mybatis
   2.3 SpringBoot+RestfulAPI
3. 前端
   3.1 VueJS 2.0 + Webpack工程介紹
   3.2 Admin-LTE介紹及使用
   3.3 VueJS一些基礎(chǔ)知識
   3.4 項目中用到的和VueJS的開源組件

前言

官方基于webpack提供了兩種項目模板，分別是vue-webpack-simple模板和vue-webpack模板，我這里用的是vue-webpack模板。別問我為什么，我夢想著我的項目會成為個大項目（:P）

這里對沒有接觸過webpack的同學(xué)有點生澀。這樣吧，簡單來說webpack我理解的就是前段的打包工具。如果我們的工程的,CSS,JS太多，是不利于管理的。webpack會打包壓縮成幾個簡單的JS CSS文件。既提升了瀏覽器加載的速度，又可以保密js源碼

Webpack簡介

Webpack是當(dāng)下最熱門的前端資源模塊化管理和打包工具，它可以將很多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源，還可以將按需加載的模塊進行代碼分割，等到實際需要的時候再異步加載。通過 loader 的轉(zhuǎn)換，任何形式的資源都可以視作模塊，比如 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等。

下圖是官方對Webpack的簡介，通過這幅圖也不難看出，一些相互依賴的模塊文件，會被打包成一個或多個js文件，可以減少HTTP的請求次數(shù)（反正我只記住了這一條）。

image.png

環(huán)境準(zhǔn)備

Node&NPM裝好，如圖所示：

image.png

然后安裝vue-cli這個工具：

npm install -g vue-cli

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

生成vue-webpack模板

這個可以參考第一章環(huán)境準(zhǔn)備講的內(nèi)容
文件目錄結(jié)構(gòu)如下:

├── 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插件的形式已經(jīng)集成run build了。所以這一步會在后面工程搞完，打包的時候執(zhí)行。

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

源碼

Git Hub Demo