目錄

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

前言

官方基于webpack提供了兩種項(xiàng)目模板最蕾，分別是vue-webpack-simple模板和vue-webpack模板，我這里用的是vue-webpack模板钝腺。別問(wèn)我為什么，我夢(mèng)想著我的項(xiàng)目會(huì)成為個(gè)大項(xiàng)目（:P）

這里對(duì)沒(méi)有接觸過(guò)webpack的同學(xué)有點(diǎn)生澀。這樣吧，簡(jiǎn)單來(lái)說(shuō)webpack我理解的就是前段的打包工具照筑。如果我們的工程的,CSS,JS太多，是不利于管理的。webpack會(huì)打包壓縮成幾個(gè)簡(jiǎn)單的JS CSS文件凝危。既提升了瀏覽器加載的速度波俄，又可以保密js源碼

Webpack簡(jiǎn)介

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

下圖是官方對(duì)Webpack的簡(jiǎn)介据块，通過(guò)這幅圖也不難看出，一些相互依賴的模塊文件折剃，會(huì)被打包成一個(gè)或多個(gè)js文件另假，可以減少HTTP的請(qǐng)求次數(shù)（反正我只記住了這一條）。

image.png

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

Node&NPM裝好怕犁，如圖所示：

image.png

然后安裝vue-cli這個(gè)工具：

npm install -g vue-cli

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

生成vue-webpack模板

這個(gè)可以參考第一章環(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

運(yùn)行

直接 npm run dev即可边篮。和第一章一樣，可以得到下圖所示頁(yè)面：

image.png

打包

npm run build

但是我們工程的打包是通過(guò)mvn的奏甫，然后第一章也講到通過(guò)mvn插件的形式已經(jīng)集成run build了戈轿。所以這一步會(huì)在后面工程搞完，打包的時(shí)候執(zhí)行阵子。

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

源碼

Git Hub Demo