使用HBuilderX-普通项目之vue-cli默认项目开发前端（四-三）

二十二、vue-cli项目中使用高德地图webJS API

1、在public文件夹下的index.html文件中引用高德地图webJS API

2、在vue.config.js文件夹中，配置Amap包

// vue.config.js
module.exports = {
    ......
	//配置Web包
	configureWebpack: {
		externals: {//外部
			'AMap': 'AMap' // 高德地图配置
		}
	}
}

3、在你要使用的vue组件中，引入高德地图

import AMap from 'AMap'; // 引入高德地图

4、要想实现页面加载出来的同时，加载出高德地图，需要将代码写在mounted()函数中

	mounted() {
		this.init();
	},
	methods: {
		init() {
			var map = new AMap.Map('container', {
				resizeEnable: true,
				center:  [116.397428, 39.90923],
				zoom: 13
			});

			var marker = new AMap.Marker({
				icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi- marker-default.png',
				position:  [116.397428, 39.90923],
				offset: new AMap.Pixel(-13, -30)
			});
			marker.setMap(map);
		}
	}

二十三、实现vue-cli项目可以在手机浏览器中运行

1、确保手机和运行vue-cli项目的电脑在同一局域网下；

2、在vue.config.js文件夹中，配置主机地址

// vue.config.js
module.exports = {
	//开发服务器
	devServer: {
		host:'你电脑的ip地址',
		port: 8080 // 端口号配置
	},
	//配置Web包
	configureWebpack: {
		externals: {//外部
			'AMap': 'AMap' // 高德地图配置
		}
	}
}

3、重新npm run serve,会生成网络地址，将其复制粘贴到手机浏览器中即可打开。

二十五：vue-cli项目引用assets中的文件

1、在about.vue文件中引用src>views>home>assets中的图片

 require('./assets/marker.png'),

 2、在about.vue文件中引用src>assets中的图片

require('@/assets/logo.png')

二十六、在图片上添加文字，并实现设置div背景色透明度而不改变div子控件的透明度

添加文字...添加文字...添加文字...

二十七、vue-cli项目访问地址不存在时，自动跳转至404页面

1、hash模式下，实现访问地址不存在时，自动跳转至404页面

const routes=[       
       //1、这样写
       {
		path: "/404",
		name: "404",
		component: () => import("@/views/404")
	},
	{
		path: "*",
		redirect: "/404" //如果url地址不存在，自动重定向到/404页面
	}

       //2、或者直接这样写
       {
		path: "*",
		name: "404",
		component: () => import("@/views/404")
	},
]
    
//这三种写法都仅适用hash模式
const router = new VueRouter({
    //mode: 'history',
    routes
})

//3、或者这样写
router.beforeEach((to, from, next) => {
  if (to.matched.length === 0) { //匹配前往的路由不存在
    from.name ? next({
      name: from.name
    }) : next('/errorinfo'); //判断此跳转路由的来源路由是否存在，存在的情况跳转到来源路由，否则跳转到404页面
  } else {
    next(); //如果匹配到正确跳转
  }
});

2、当history模式时，报错：Uncaught SyntaxError: Unexpected token '<'