【vue】-----局部组件的使用方法

 

src文件夹》components文件夹》home文件夹》index.vue文件

<template>
    <div>
        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
        home  文件
    </div>
</template>

 

 

上面代码写好了之后：

在项目下面 的App.vue  文件中写上：

组件文件与App.vue和main.js  的关系

 

配置文件  vue.congig.js

const path = require("path")  //path:所有输出文件的目标路径;
module.exports = {
    devServer:{      //在开发环境下将 API 请求代理到 API 服务器 
        proxy:{       //用来设置代理，
            "/api":{    //自定义的/api
                target:"http://39.97.33.178",   
        //接口地址，  target 目标的意思   ，当请求/api的时候就代理请求"http://39.97.33.178"
                changeOrigin:true   //用来设置跨域的，如果是域名需要额外添加一个参数changeOrigin: true，否则会代理失败。
            }
        }
    },
    configureWebpack:{  //configure是配置，配置webpack
        resolve:{  //resolve  解决的意思
             //alias  是别名的  意思
            alias:{    //下面就是为了解决../../的问题，（文件夹下面文件夹的文件访问其他文件夹的文件）
                "@":path.join(__dirname,"./src"),   //这个是路径拼接，
                     //意思是@ 符号就代表src
                "api":path.join(__dirname,"./src/api"),  //用来管理接口的
                "components":path.join(__dirname,"./src/components"),   //用来放组件的
                "views":path.join(__dirname,"./src/views"),  //用来放页面的
                "common":path.join(__dirname,"./src/common"),  //用来放公共的组件的，及其他公共的东西
                "utils":path.join(__dirname,"./src/utils"), //公众的组件，公共的方法，封装公共的
                "router":path.join(__dirname,"./src/router"),   // 路由文件夹的设置
                "store":path.join(__dirname,"./src/store")  //vuex的文件夹设置
            }
        }
    }
}

组件文件.vue

代码：

局部组件文件夹components》home》index.vue 文件 代码：

<template>
    <div>
        home  eeeeeeeeeeeeeeeeeeeeeeeeee
            <h2>大山如下</h2>
            <!-- 只能写在这个div里面，不能写在外部，不然就会报错 -->
    </div>
</template>
<script>
export default {
    
}
</script>
<style>
div{
    width: 200px;
    height: 300px;
    background: rebeccapurple;

}
</style>

 

App.vue  文件

<template>
  <div id="app">
    <!-- <router-view></router-view> -->
    <!-- <TabBar/> -->
  <home/>  
   <home/>
  </div>
</template>

<script>
// import TabBar from "common/tabBar"   //引入的
// import http from "utils/http.js"   //引入
import Home from "components/home"
export default {
    name:"App",
    components:{  //局部组件
      // TabBar,
      Home
    },
    // created(){  //组件生命周期第二个
    //   http("get","/api/movieOnInfoList?cityId=10").then((data)=>{
    //     console.log(data);
    //   })
    // }
   
}
/*
 created 创建后
1、当前生命周期可以访问到data中的属性以及methods身上的方法。
2、当前生命周期执行的时候会将data身上的所有属性遍历添加getter/setter方法。
3、当前生命周期执行的时候会将data与methods身上所有的属性和方法遍历到vm的实例身上。
4、因为当前生命周期会遍历data身上的属性添加getter/setter，因此我们可以在当前生命周期函数中进行前后端数据的交互。
 */
</script>
<style lang="scss">

</style>

 

 main.js  文件

代码;

import Vue from 'vue'   //引入vue
import App from './App.vue'    //引入App.vue文件
// import store from "store"
// import router from "router"

Vue.config.productionTip = false

new Vue({   //实例化
  // router,
  // store,
  render: h => h(App)  //render  渲染，通过外部挂载了实现
}).$mount('#app')

/*
new Vue({render: h => h(App) }).$mount('#app')
解析：
new Vue({render: h => h(App) })  实例化出来了
.$mount('#app')  把实例化的挂载上去，挂载哪里？

挂载在App.vue  上面

*/

效果：

 

 

 

 

总结：

使用Vue.component 注册全局组件》创建vue实例》组件注册之后何以作为自定义元素在一个实例模板中使用

使用components注册局部组件》创建vue实例》父组件中使用