vue引入组件注释

组件引入进来分为三步走：①引入组件，②注册组件，③使用组件

<template>
    <view>
        <uni-badge text="abc" :inverted="true"></uni-badge><!--3.使用组件-->
    </view>
</template>
<script>
    import uniBadge from "../../../components/uni-badge.vue";//1.导入组件（这步属于传统vue规范，但在uni-app的easycom下可以省略这步）
    export default {
        data() {
            return {
                
            }
        },
        components: {
            uniBadge //2.注册组件（这步属于传统vue规范，但在uni-app的easycom下可以省略这步）
        }
    }
</script>

如需要全局导入vue组件，即每个页面都可以直接使用而不用引用和注册的话，在项目根目录下的main.js里处理。如下面所示

//main.js
import pageHead from './components/page-head.vue' //导入
Vue.component('page-head', pageHead) //注册。注册后在每个vue的page页面里可以直接使用<page-head></page-head>组件。

 

 

 

另外标注: 以前引入用通过script src、link href引入外部的js和css；

现在是es6的写法，import引入外部的js模块(注意不是文件)或css

以前

<script src="js/jquery.js" type="text/javascript"></script>
<link href="css/jquery.css" rel="stylesheet" type="text/css"/>

 

现在

<script>
var util = require('/static/common/util.js');  //require这个js模块
var formatedPlayTime = util.formatTime(playTime); //调用js模块的方法
</script>

css引入模块

<style>
    @import "./common/uni.css";
    
    .hello-text{
        color:#7A7E83;
    }
</style>