vue项目全局组件的引入和app局部组件引入的两个简单例子

飞熊 • 2023年8月9日下午4:18 • 技术随笔 • 阅读 590

首先，新建一个vue项目。

1.app.vue局部组件引入

只需要在app.vue文件中如下编写：

<template>
    <div id="app">
        <Test/>    // 1.激活Test.vue文件
    </div>
</template>

<script>
    import Test from './components/Test.vue';   //2.引入组件
    export default {
        name: 'app',
        components: {
            Test,   /* 3. 注册组件 */  
        }
    };
</script>

<style>
</style>

2. 全局路由组件的引入

2.1 首先安装vue-router

npm install vue-router

2.2 各文件改动

首先是app.vue；

<template>
    <div id="app">
        <router-view></router-view>   <!--此处提供一个空的路由窗口，必须有-->
    </div>
</template>

<script>
    export default {
        name: 'app'
    };
</script>

其次，新建一个router文件夹，里面新建一个index.js文件，如图示：

注意目录结构，位置不正确它是识别不到的。其余东西不重要，不同的编辑器不同差别。（这里用的visual studio 2017）

然后在index.js文件中:

import Vue from 'vue'
import Router from 'vue-router'   //引入路由组件
import Test from '@/components/Test'   //引入要用的vue文件

Vue.use(Router)   //使用router
export default new Router({
    routes: [
        {
            path: '/',    //表示运行时首页显示该页面
            name: 'Test',   //按需，可有可无
            component: Test   //组件名
        }
    ]
})

之后是在main.js文件中使用该router文件夹：

import Vue from 'vue';
import App from './App.vue';
import router from './router';    // 1. 引入

//这三段可忽略，我这里用了element-ui库，当然前提安装了
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

Vue.config.productionTip = true;

new Vue({
    router,   //2. 初始化
    render: h => h(App)
}).$mount('#app');

用路由组件方便于多个页面引入以及互相切换时。

3.补一个，如果全局不想用路由，这么写

main.js中注册该组件

import Vue from 'vue';
import App from './App.vue';
import Test from './components/Test';

Vue.config.productionTip = true;
vue.component("test", Test)
new Vue({
    render: h => h(App)
}).$mount('#app');

App.vue加载该组件

<template>
    <div id="app">
        <test></test>    <!--加载Test.vue-->
    </div>
</template>

<script>
    export default {
        name: 'app'
    };
</script>

<style>
</style>