Spring boot+Shiro+ spring MVC+swagger UI +Mybatis+mysql+Vue +Element UI 之二 vue 环境演示

前面说到如何整合spring  boot 和vue进行前后端独立并行开发，今天讲解一下如何构建vue到开发环境

1. npm install 

执行npm install命令安装依赖,前提是安装npm 

hanruikaideMacBook-Pro:flow-platform-manage-html hanruikai$ npm install

npm WARN The package less is included as both a dev and production dependency.

npm WARN The package less-loader is included as both a dev and production dependency.

added 1 package in 28.527s

hanruikaideMacBook-Pro:flow-platform-manage-html hanruikai$ 

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

允许用户从NPM服务器下载别人编写的第三方包到本地使用。

允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。

允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。命令如下，出现版本提示表示安装成功:
hanruikaideMacBook-Pro:flow-platform-manage-html hanruikai$ npm  -v

5.5.1

2. 执行npm run dev

hanruikaideMacBook-Pro:flow-platform-manage-html hanruikai$ npm  run dev

> flow-platform-manage-html@1.0.0 dev /Users/hanruikai/eclipse-workspace/flow-platform-aggregator/flow-platform-manage-html

> npm run start

> flow-platform-manage-html@1.0.0 start /Users/hanruikai/eclipse-workspace/flow-platform-aggregator/flow-platform-manage-html

> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 95% emitting                                                                           

 DONE  Compiled successfully in 9931ms                                                                                                                                         11:10:33

 I  Your application is running here: http://localhost:8089   

系统启动，可以访问

3. 如果不执行第二步到命令，执行npm run build,则

hanruikaideMacBook-Pro:flow-platform-manage-html hanruikai$ npm  run build

> flow-platform-manage-html@1.0.0 build /Users/hanruikai/eclipse-workspace/flow-platform-aggregator/flow-platform-manage-html

> node build/build.js

Hash: 6979bb453ca854525c21

Version: webpack 3.10.0

Time: 24797ms

                                                  Asset       Size  Chunks                    Chunk Names

                  static/js/app.e8bfb9ee4afe7f1f4992.js    30.5 kB      20  [emitted]         app

                      static/img/login_logo.990b79f.png     106 kB          [emitted]         

                        static/img/index_bg.ee9f322.png     140 kB          [emitted]         

                 static/fonts/element-icons.6f0a763.ttf      11 kB          [emitted]         

                          static/img/female.f7b89d6.png    25.3 kB          [emitted]         

                            static/img/male.158c6dd.png    31.8 kB          [emitted]         

                    static/js/0.fd38e807288636e32222.js    1.03 kB       0  [emitted]         

                    static/js/1.c6399e66c5fd6d66633b.js    15.4 kB       1  [emitted]         

                    static/js/2.38d644bd4be0145b6185.js    8.36 kB       2  [emitted]         

                    static/js/3.8155e7601853648f56df.js    11.4 kB       3  [emitted]         

                    static/js/4.b2dfddc53eecd95149dd.js    6.46 kB       4  [emitted]         

                    static/js/5.f3cbe83074c44e95220a.js    4.57 kB       5  [emitted]         

                    static/js/6.052e8c62504dbe017fd8.js  385 bytes       6  [emitted]         

                    static/js/7.473a9d8c7823966c3ae9.js  385 bytes       7  [emitted]         

                    static/js/8.1c0829e64839fafe51e3.js  385 bytes       8  [emitted]         

                    static/js/9.9924aba630e65eab5aba.js  385 bytes       9  [emitted]         

                   static/js/10.2d755cefe93de151df8f.js  387 bytes      10  [emitted]         

                   static/js/11.8208e0ebe7a6be8b8934.js  387 bytes      11  [emitted]         

                   static/js/12.84d427025f2760237c0f.js  387 bytes      12  [emitted]         

                   static/js/13.1986040166320e37f925.js  387 bytes      13  [emitted]         

                   static/js/14.73bc06d800d81a0a0954.js  387 bytes      14  [emitted]         

                   static/js/15.6980234794a938674a2e.js  387 bytes      15  [emitted]         

                   static/js/16.fb5d03e915d0eaf20504.js  387 bytes      16  [emitted]         

                   static/js/17.1166ce6e8895c7349a91.js  387 bytes      17  [emitted]         

                   static/js/18.58a0f034f8b88bae6ae7.js  389 bytes      18  [emitted]         

               static/js/vendor.64236d4831baad609c2b.js     723 kB      19  [emitted]  [big]  vendor

                              static/img/bg.bf4c74c.png      55 kB          [emitted]         

             static/js/manifest.1a7f4130b9c563189a2c.js    1.97 kB      21  [emitted]         manifest

    static/css/app.94bf65f1cb19262c590a14b04328a5e6.css     257 kB      20  [emitted]  [big]  app

static/css/app.94bf65f1cb19262c590a14b04328a5e6.css.map     350 kB          [emitted]         

                static/js/0.fd38e807288636e32222.js.map    7.06 kB       0  [emitted]         

                static/js/1.c6399e66c5fd6d66633b.js.map    32.5 kB       1  [emitted]         

                static/js/2.38d644bd4be0145b6185.js.map    24.7 kB       2  [emitted]         

                static/js/3.8155e7601853648f56df.js.map    34.1 kB       3  [emitted]         

                static/js/4.b2dfddc53eecd95149dd.js.map    20.8 kB       4  [emitted]         

                static/js/5.f3cbe83074c44e95220a.js.map    15.4 kB       5  [emitted]         

                static/js/6.052e8c62504dbe017fd8.js.map     2.9 kB       6  [emitted]         

                static/js/7.473a9d8c7823966c3ae9.js.map    3.14 kB       7  [emitted]         

                static/js/8.1c0829e64839fafe51e3.js.map    3.02 kB       8  [emitted]         

                static/js/9.9924aba630e65eab5aba.js.map    3.12 kB       9  [emitted]         

               static/js/10.2d755cefe93de151df8f.js.map    2.99 kB      10  [emitted]         

               static/js/11.8208e0ebe7a6be8b8934.js.map     3.1 kB      11  [emitted]         

               static/js/12.84d427025f2760237c0f.js.map    3.06 kB      12  [emitted]         

               static/js/13.1986040166320e37f925.js.map    3.06 kB      13  [emitted]         

               static/js/14.73bc06d800d81a0a0954.js.map    3.08 kB      14  [emitted]         

               static/js/15.6980234794a938674a2e.js.map    3.21 kB      15  [emitted]         

               static/js/16.fb5d03e915d0eaf20504.js.map    3.13 kB      16  [emitted]         

               static/js/17.1166ce6e8895c7349a91.js.map    3.23 kB      17  [emitted]         

               static/js/18.58a0f034f8b88bae6ae7.js.map    3.25 kB      18  [emitted]         

           static/js/vendor.64236d4831baad609c2b.js.map    2.78 MB      19  [emitted]         vendor

              static/js/app.e8bfb9ee4afe7f1f4992.js.map    97.9 kB      20  [emitted]         app

         static/js/manifest.1a7f4130b9c563189a2c.js.map    8.72 kB      21  [emitted]         manifest

                                             index.html  527 bytes          [emitted]         

  Build complete.

  Tip: built files are meant to be served over an HTTP server.

  Opening index.html over file:// won't work.

看最后一句话，build之后生成对文件需要http server进行部署，就能访问。

这些命令到配置都是在工程目录下到package.json进行配置到，类似于ant命令，不配置是不能使用到 ，可以找到对应命令到执行逻辑。此处不展开，因为暂时对细节不清楚。继续往下走。

4 打开页面

http://localhost:8089/page/index.html/#/home

目前问题是打开页面可以正常访问，但是前端访问的端口是8098，后台server启动的端口地址是8080，没有发现什么地方配置映射，但是访问确实正常的。