vue笔记（20200917）内包含（安装和创建vue、导入HBuilder、路由router、后台springboot跨域配置、arcgis of js 的配合）

重新开始创建一个vue项目，并做好笔记

一、创建项目

1.首先安装vue-cli

cnpm install -g @vue/cli

2.安装webpack

cnpm install -g webpack

如果webpack安装失败的话

npm install --save-dev webpack-cli -g

3.然后打开vue控制台

vue ui

4.输入具体参数

---

由此创建完毕

其中node的npm（cnpm）是负责下载 的

vue ui 是给一个界面让你去创建vue项目，当然你直接使用下面的命令也能创建

vue create 项目名字

最后创建成功的界面是：

然后将其复制到HBuilder

运行起来server

访问8080，这样vue的项目就创建完毕

二、修改项目

1.说明

main.js是项目的入口文件，项目中所有的页面都会加载main.js,所以main.js,主要有三个作用：

1.实例化Vue。

2.放置项目中经常会用到的插件和CSS样式。例如： 网络请求插件:axios和vue-resource、图片懒加载插件：vue-lazyload

3.存储全局变量。例如（用于的基本信息）

安装Element（前端框架）

在项目下面运行

npm i element-ui -S

在HBuilder下方运行命令即可

运行效果

安装资源库vue-resource（做请求之类的用法）

npm install vue-resource --save-dev

安装路由vue-router（路由跳转之类的）

npm install vue-router

最后的关系如下：

其中index.html 包含

对应的App.vue

//然而这句import就是引用了HelloWord.vue 这一块组件，
//1、引入组件 import后的名字一般与组件名称相同，也可不一样
import HelloWorld from './components/HelloWorld.vue' 

export default {
  name: 'App',
  components: {
       //2、注册组件 一般直接取一个名字  即：facePop：facePop
    HelloWorld
  }
}

这就相互绑定了起来

以下具体的关系图：

2.导入CSS

import "@/assets/css/login.css"

对应的目录如下：

3.eslint关闭

在项目更目录下新建vue.config.js

module.exports = {
	 lintOnSave: false, 
}

更多配置，可以看这里https://cli.vuejs.org/config/

4.关于router的跳转链接问题

router主要是进行vue之间的跳转，首先是进行安装，上面已经进行了安装，然后在根目录下新建一个conifg文件夹然后新建router.js，具体内容如下：

//引入vue
import Vue from 'vue';
//引入vue-router
import VueRouter from 'vue-router';
//第三方库需要use一下才能用
Vue.use(VueRouter)
//引用页面
import Login from '../components/Login.vue';
import Home from '../components/home.vue';

//定义routes路由的集合，数组类型
const routes = [
	//单个路由均为对象类型，path代表的是路径，component代表组件
	{
		path: '/',
		 name: 'Login',
		component: Login
	},
	{
		path: '/home',
		component: Home
	},
]

//实例化VueRouter并将routes添加进去
const router = new VueRouter({
	//ES6简写，等于routes：routes
	routes
});

//抛出这个这个实例对象方便外部读取以及访问
export default router

然后修改main.js

具体的使用方式

首先是上面配置了，自动进入Login.vue

然后就是链接 to对应的就是在router.js 上面写的component

<router-link to="/home">点这里跳转</router-link>

或者使用

使用js编程的方式进行页面跳转

<div @click="goPage('/xx/xxx/')"></div>
goPage(url){
  this.$router.push({path:url})
}

其中this.$router.push({path:url})也可以用this.$router.push({name:name})去选择

再简单来说就是

this.$router.push({path:'/xx/xxx/'})

5.统一配置URL之类

1.在config文件夹中新建global.js文件

this.$router.push({path:'/xx/xxx/'})

2.在入口文件中引入，设置为全局变量

import global_ from '../config/global.js'
Vue.prototype.GLOBAL = global_;

3.在有需要的地方引入baseUrl

created() {
    const baseUrl=this.GLOBAL.BASE_URL
    // const classId=this.$route.query.classId
    console.log(baseUrl)
  },
http://192.168.1.62:8080/rest/  //这个是上面打印的baseUrl

6.然后得考虑后台跨域的问题，目前我后端用的是springboot，新建CorsConfig.java

package com.szyjjk.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

/**
 * @program: szyjjk
 * @description: 跨域配置
 * @author: yangyue
 * @create: 2020-09-17 09:39
 */


@Configuration
public class CorsConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
                .maxAge(3600)
                .allowCredentials(true);
    }
}

6.关于如何配置arcgis for js 的加载

首先得获得arcgis的支持，运行命令

npm install --save esri-loader

然后找到一个vue ，就直接写了

<template>
	<div class="HomeBaseData ">
		<div id="viewDiv" style="width: 500px;height: 500px;"></div>
	</div>
</template>

<script>
	// 导入arcgis
	import esriLoader from "esri-loader";
	export default {
		name: 'HomeBaseData',
		data() {
			return {
			}
		},
		created() {
			const options = {
				url: "https://js.arcgis.com/4.15/" //js资源
			};
			esriLoader.loadModules([
            			"esri/Map",
					'esri/views/MapView',
					"dojo/_base/array"
				], options)
				.then(([
					Map,
					MapView,
					array
				]) => {
					const map = new Map({
						basemap: "streets"
					});
					const mapview = new MapView({
						container: "viewDiv",
						map: map,
						zoom: 12,
						center: [102.7346125, 25.0563901]
					});
					//监听地图比例尺改变事件 
				}, reason => {
					console.log(reason);
				});
		},
		methods: {

		}
	}
</script>

<style scoped>
/* css资源 */
@import url('https://js.arcgis.com/4.15/esri/themes/light/main.css');
</style>

7,关于地址重复报错的情况 在router.js 里面添加如下代码

//cv以下代码解决路由地址重复的报错问题(一劳永逸)
const originalPush = VueRouter.prototype.push
   VueRouter.prototype.push = function push(location) {
   return originalPush.call(this, location).catch(err => err)
}