目录
 
spring boot  与 vue 环境配置
 
node.js下载
 
下载地址
 
版本查看
 
vue
 
介绍
 
vue-cli脚手架
 
项目创建
 
依赖安装
 
运行
 
Spring boot
 
介绍
 
eclipse创建spring boot 项目
 
通过官网创建spring boot项目
 
导入eclipse
 
修改项目端口
 
修改pom.xml 文件
 
编写一个测试controller
 
启动项目
 

spring boot  与 vue 环境配置
 
node.js下载
 
下载地址
 
在搭建vue的开发环境之前，一定一定要先下载node.js，，vue的运行是要依赖于node的npm的管理工具来实现，node可以在官网或者中文网里面下载，根据自己的电脑选择是32还是64 ，网址：http://nodejs.cn；
 
 
版本查看
 
下载好node之后，打开docs管理工具，先看看node安装成功了没有，输入 node -v ，回车，会输出node的版本号，
 
 
 
 
这样就已经是安装成功了，由于在国内使用npm是非常慢的，所以在这里我们推荐使用淘宝npm镜像，使用
 
淘宝的cnpm命令管理工具可以代替默认的npm管理工具：$ npm install -g cnpm --registry=https://registry.npm.taobao.org；
 
vue
 
介绍
 
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
 
vue-cli脚手架
 
淘宝镜像安装成功之后，我们就可以全局vue-cli脚手架，输入命令：cnpm install --global vue-cli  回车；验证是否安装成功，在命令输入vue，出来vue的信息，及说明安装成功；
 
 
项目创建
 
然后我们开始创建新的项目输入命令：vue init webpack my-project  回车，my-project是我自己的文件夹的名字，是基于webpack的项目，输入之后就一直回车，直到出现是否要安装vue-route，
 
这个我们在项目要用到，所以就输入y 回车
 
 
下面会出现是否需要js语法检测，这个我们暂时用不到，就可以直接输入no，后面的都可以直接输入no，都是我们暂时用不到的
 
 
依赖安装
 
文件夹已经下载好了，现在就可以进入文件夹，输入： cd my-project 回车，因为各个模板之间都是相互依赖的，所以现在我们要安装依赖，
 
输入命令：cnpm install
 
 
运行
 
已经安装好之后，现在要来测试一下我们下载好的模板能不能正常的运行，在命令行输入：cnpm run dev 回车即可，
 
 
8080是默认的端口，要访问的话，直接在浏览器输入localhost:8080就可以打开默认的模板了；
 
 

Spring boot
 
介绍
 
Spring Boot 是由 Pivotal 团队提供的全新框架，其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程。
 
　　该框架使用了特定的方式来进行配置，从而使开发人员不再需要定义样板化的配置。　　
 
　　通过这种方式，Spring Boot 致力于在蓬勃发展的快速应用开发领域（rapidapplication development）成为领导者。
 
eclipse创建spring boot 项目
 
通过官网创建spring boot项目
 
访问http://start.spring.io/ ，选择构建工具Maven Project、Spring Boot版本2.1.3以及一些工程基本信息，点击“java version.”java版本选择1.8，点击Generate Project下载项目压缩包
 
 
导入eclipse
 
解压后，使用eclipse，Import -> Existing Maven Projects -> Next ->选择解压后的文件夹-> Finsh
 
 
修改项目端口
 
默认项目端口为8080，避免与vue项目端口冲突。修改项目端口，在application.properties中添加 server.port=8081
 
 
修改pom.xml 文件
 
添加web的starter
 
<!-- web -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
 
编写一个测试controller
 
 
启动项目
 
下面点击项目run as——>Spring Boot App，在浏览器中输入localhost:8081/hello
 
 
 
 
 

vue 环境配置（使用cross-env配置）
 
 
 
通过定义不同的打包命令， 更改项目环境变量 。
 
 
1、下载 cross-even(什么是’cross-even’)
 
npm install cross-env --save-dev
 

 
2、package.json 文件 查询 scripts，在其中加入如下代码：（其为不同环境的打包命令，可自定义）。
 
    "build:qa": "cross-env NODE_ENV=production env_config=test node build/build.js",
    "build:pre": "cross-env NODE_ENV=production env_config=pre node build/build.js",
    "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
 

 
3、全局变量 process 接收打包时改变的环境变量。
 
3.1、在conifg文件中建立N(需要的n个环境)个文件夹（例如：test.env.js）：【为了环境变量模块化配置】
 
'use strict'
const merge = require('webpack-merge')
const testEnv = require('./test.env')

module.exports = merge(testEnv, {
  NODE_ENV: '"testing"',
  EVN_CONFIG: '"test"',
  BASE_API:'"https://www.baidu.com/"',
})
 
3.2 在config文件的 index.js 中 build模块 添加如下：
 
    prodEnv: require('./prod.env'),
    preEnv: require('./pre.env'),
    testEnv: require('./test.env'),
 
3.3 在build文件的 webpack.prod.conf文件中修改：【动态获取】
 
// const env = require('../config/prod.env')  //原来的
const env = config.build[process.env.env_config + 'Env']   //现在动态的
 
3.4 在build文件的 webpack.prod.conf文件中修改：【build时候的 log】
 
let spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config + ' mode...')
spinner.start()
 
3.5 本地测试打包：在config文件的 index.js 中 build模块 修改如下：
 
 assetsPublicPath: './',
 

 
4、使用：打包后全局可使用 process.env。

 
本教程关于vue 在vscode 中的调试及开发。使用mac系统完成配置。
 
 
配置脚本在 vue_install.sh
 
 
详细说明链接
 
mac安装 vue开发环境
 
以下展示 shell内容的详细信息。
 

#!/bin/bash -v
#set -v 

echo  "vrew 版本."
brew -v 

echo "安装node.js"
brew install nodejs

echo "查看node 版本"
node -v

echo "获取nodejs模块安装目录访问权限 （必须执行）"
sudo chmod -R 777 /usr/local/lib/node_modules/

echo "安装 淘宝镜像 （cnpm）"
npm install -g cnpm --registry=https://registry.npm.taobao.org

echo  "安装webpack"
sudo cnpm install webpack-dev-server -g 
sudo cnpm install webpack -g
sudo cnpm install webpack-dev-server -g 

echo "安装vue脚手架"
sudo cnpm install -g vue-cli

echo "到目的目录"
cd ./src

echo "安装项目依赖"
cnpm install

echo "安装 vue 路由模块vue-router和网络请求模块vue-resource"
cnpm install vue-router vue-resource --save

echo "启动项目：在项目目录中使用,npm run dev 或 cnpm run dev"

echo "报错可能需要执行(npm install 或 npm install -g @vue/cli@latest)"

 
详细请见注解
 
vscode vue 调试 (chrome 浏览器)
 
 
安装chrome 到系统软件目录(必须系统软件目录))
 
 
vscode 搜索chrome debug插件
 
 
 
配置debug信息
 
 
 
配置调试信息
 
 注意：这里需要配置的url需要与
demo 端口需要一一映射
 
 
调试开始
 
启动vue项目
 
 npm run dev
 
启动 vscode 调试
 
 
打包发布
 
npm run build:prod
 
喜欢请给星
 

1、基础环境
 
    
 
 
2、创建项目
 
 
 
 
选择第三项自己配置
 
 
按上下移动，空格键选择，回车键确定
 
 
后面就按自己喜好去配，不懂可以摆渡
 
3、安装cesium依赖
 
 
4、配置vue.config.js
 
在项目目录下新建vue.config.js，配置如下
 
const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const path = require('path')

let cesiumSource = './node_modules/cesium/Source'
let cesiumWorkers = '../Build/Cesium/Workers'

module.exports = {
  // 基本路径  3.6之前的版本时 baseUrl
  publicPath: "./",
  // 输出文件目录
  outputDir: "dist",
  // eslint-loader 是否在保存的时候检查
  lintOnSave: false,
  // webpack-dev-server 相关配置
  devServer: {
    open: process.platform === "darwin",
    host: "0.0.0.0",
    port: 8088,
    https: false,
    hotOnly: false
  },
  configureWebpack: {
    output: {
      sourcePrefix: ' '
    },
    amd: {
      toUrlUndefined: true
    },
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': path.resolve('src'),
        'cesium': path.resolve(__dirname, cesiumSource)
      }
    },
    plugins: [
      new CopyWebpackPlugin([{ from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' }]),
      new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' }]),
      new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }]),
      new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' }]),
      new webpack.DefinePlugin({
        CESIUM_BASE_URL: JSON.stringify('./')
      })
    ],
    module: {
      unknownContextCritical: /^.\/.*$/,
      unknownContextCritical: false
    }
  }
};
 
5、配置main.js全局引入cesium相关文件
 
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "./plugins/element.js";

Vue.config.productionTip = false;

//引入cesium相关文件
var cesium = require('cesium/Cesium');
var widgets= require('cesium/Widgets/widgets.css');

Vue.prototype.cesium = cesium
Vue.prototype.widgets = widgets

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");
 
6、修改Hone.vue
 
<template>
  <div id="container" class="box">
    <div id="cesiumContainer"></div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  mounted(){
    this.init()
  },
  methods: {
    init() {
      let Cesium = this.cesium
      let viewer = new Cesium.Viewer('cesiumContainer');
      viewer._cesiumWidget._creditContainer.style.display = "none";// 隐藏版权
    }
  }
};
</script>

<style lang='scss' scoped>
html,
body,
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.box {
  height: 100%;
} 
</style>
 
7、修改App.vue
 
<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style lang="scss">
</style>
 
8、启动项目
 
npm run serve
 
运行效果