vue-cli项目记

• 取config里地址

var backUrl = process.env.BASE_API

• 在vue中，直接使用window.open打开网页无法打开，查阅资料后得知是由于vue拦截了，如果需要执行，可以写在某个操作里，不如弹窗，按钮

<button @click="open">444444444444444444</button>

open() {
  window.open('http://mint-ui.github.io/docs/#/zh-cn2', '_blank')
},

• 使用本地自定义全局组件
  main.js

import Vue from 'vue'
import App from './App'
import router from './router'
 import Common from './components/common.vue'
Vue.config.productionTip = false
Vue.component('common', Common)

/* eslint-disable no-new */
new Vue({
	el: '#app',
	router,
	components: { App },
	template: '<App/>',
})

• vue-cli 引入全局样式
  因为使用的是scss语法，并且写了一些公共样式，不希望每一个页面都去import，但是尝试在main.js 和App.vue使用import引入，都没有生效。查询得知需要安装scss的资源依赖sass-resources-loader。
  但是对于css，则可以直接引入，原因是scss等预处理语言编译的时候直接转换为了css，到使用的时候已经没有了。

<template>
  <div id="app">
    <!-- <keep-alive include="MangeCards"> -->
      <router-view/>
    <!-- </keep-alive> -->
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>

<link rel="stylesheet" type="text/css" href="./assets/scss/common.css">
<style lang="scss">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif, '微软雅黑';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
  width: 100%;
  height: 100%;
}
</style>

目录结构如下图

• .vue文件中引入外部css文件
  @import ‘路径’；
  分号一定要写，不然不报错，也不生效

引入外部压缩js文件
因为有个写好的html网页，用到了swiper，想直接移动到vue里，但是在具体.vue文件中引入后无法使用，经过查询测试，发现需要在main.js 中引入并挂载。

import './assets/swiper/js/jquery-1.11.1.min.js'
import {Swiper} from './assets/swiper/js/swiper.min.js'
// console.log(Swiper)

Vue.prototype.Swiper = Swiper

使用

console.log(this.Swiper)
const Swiper = this.Swiper
// console.log(Swiper)
const certifySwiper = new Swiper('#box .swiper-container', {
}）