Vue组件注册、导入常用组件

全局注册

在vue中对于一些复用性比较高的组件,为了避免频繁的import…导入操作,我们可以将其注册为全局组件。
全局组件在main.js文件中定义。

语法

1.引入组件
js文件可以省略.js
vue文件不能省略.vue后缀。
2.Vue.use()
注意：Vue.use()语法只能注册Vue定义的组件。

注册vue文件

main.js文件

import ScaleBox from '@/views/echarts/ScaleBox.vue'
Vue.use(ScaleBox)

vue文件内使用：

<template>
  <scale-box>
        <div id="main" style="width:500px;height:500px"></div>
        <div></div>
  </scale-box>
</template>

注册js文件

main.js文件

import GL_Component from '@/utils/globalComponents'
Vue.use(GL_Component);

vue文件中使用：

常用组件

添加路由组件

npm install vue-router --save

main.js文件导入：
（1）import router from ‘./router’
（2）Vue实例有router对象

import router from './router'

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

router目录创建index.js文件：

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

// 具体路由
const routes= [
    {
      path: '/',
      component: ()=> import('../views/Home.vue')
    },
]

/* 创建路由对象 */
const router = new VueRouter({
    /*去掉访问地址#*/
    // mode:"history",
    routes
  })
 /* 外部引用 */
export default router

axios组件

安装

npm install axios -S

main.js文件导入：

import axios from 'axios'
Vue.prototype.$axios = axios

element-ui组件

npm

npm i element-ui -S

main.js文件导入：

import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element)

echarts组件

npm

npm install echarts --save

安装指定版本：

npm install echarts@4.9.0 --save

main.js文件导入：

import echarts from 'echarts'
Vue.prototype.echarts = echarts

具体的某个vue文件使用：

import echarts from 'echarts';

使用SCSS

vue版本： “vue”: “^2.6.11”
（1）安装node-sass
sass-loader依赖于node-sass，所以要安装node-sass

npm install node-sass@4.14.1 --save-dev

（2）安装sass

npm install sass-loader@8.0.2 --save

在style内加入lang=‘scss’

<style lang="scss" scoped>

</style>

使用moment

导入

npm install moment -save

main.js文件导入

//导入时间格式化
import moment from 'moment'
//赋值使用
Vue.prototype.$moment = moment;

使用：

<span>{{$moment(form.createTime).format("YYYY-MM-DD")}}</span>
<div>{{$moment(new Date()).format("YYYY年MM月DD日 HH:mm:ss")}}</div>