Vue小知识

环境变量

在process.env中就可以访问到当前环境变量，应用于baseURL配置，可在 .env 文件中以 VUE_APP为前缀定义自定义属性。更多介绍移步掘金

多个组件引入

// componentsImport.js
export {default as TurnoverMoney} from "./TurnoverMoney.vue";
export {default as ProjectType}  from "./ProjectType.vue";
// .vue
import * as itemElements from "../itemElement";
export default{
  ...
  components: { ...itemElements },
}

认识Vue.use()和install方法

利用use方法，可以帮助我们注册好组件和自定义指令

// 引入组件
import LoadingComponent from './loading.vue'
// 定义 Loading 对象
const Loading={
    // install 是默认的方法。当外界在 use 这个组件的时候，就会调用本身的 install 方法，同时传一个 Vue 这个类的参数。
    install:function(Vue){
        Vue.component('Loading',LoadingComponent)
    }
}
// 导出
export default Loading

// 其中'./components/loading/index' 的 /index 可以不写，webpack会自动找到并加载 index 。如果是其他的名字就需要写上。
import Loading from './components/loading/index'
// 这时需要 use(Loading)，如果不写 Vue.use()的话，浏览器会报错，大家可以试一下
Vue.use(Loading)

更多介绍移步掘金

vue+vscode断点调试

参考掘金

动态生成面包屑

根据routes路由表层级访问动态生成面包屑，在$route.matched属性中，可以查看当前路由层级关系，配合在层级路由meta属性，可动态渲染面包屑

// routes中配置
{
  path:'/',
  meta:{title:'首页'},
  children:[
    {
      ...
      path:'manage',
      meta:{title:'活动管理'},
      children:[
        {
          ...
          path:'list',
          meta:{title:'活动列表'}
        }
      ]
    }
  ]
}

// 面包屑代码
<el-breadcrumb-item v-for="breadCrumbItem in breadCrumbList" :key="breadCrumbList.path">
{{breadCrumbItem.meta.title}}
</el-breadcrumb-item>

...
computed:{
  breadCrumbList() {
    return this.$route.matched;
  }
}
...

检测元素外部（或内部）的单击

有时候需要检测单击是发生在特定元素el的内部还是外部，通常使用的方法是：

window.addEventListener('mousedown', e=>{
  // 获取被点击元素
   const clickedEl = e.target;
  if(el.contains(clickedEl)){
    // 在 el 内点击
  } else{
    // 在 el 外点击
  }
])

组件元数据

并不是添加到一个组件的每一点信息都是状态。有时我们需要添加一些元数据，给其他组件提供更多信息。

export default {
  name: 'LiveUsersWidget',
  // 👇 只需将其作为一个额外的属性添加
  columns: 3,
  props: {
    // ...
  },
  data() {
    return {
      //...
    };
  },
};

你会发现这个元数据是组件上的一个属性。

import LiveUsersWidget from './LiveUsersWidget.vue';
const { columns } = LiveUsersWidget;

我们也可以通过特殊的$options属性从组件内部访问元数据。

export default {
  name: 'LiveUsersWidget',
  columns: 3,
  created() {
    // 👇 `$options` contains all the metadata for a component
    console.log(`Using ${this.$options.metadata} columns`);
  },
};

只要记住，这个元数据对组件的每个实例都是一样的，而且不是响应式的。

这方面的其他用途包括（但不限于）：

• 保持单个组件的版本号
• 用于构建工具的自定义标志，以区别对待组件
• 在计算属性、数据、watch 等之外为组件添加自定义功能
• 其它