初识vue-简单的自定义标签页面

Posted 2020-11-23 treelome

vue3.0比vue2.0简化了许多。

在这里呢就做了一个简单的标签页面。在这当中难免会有些错误，请勿见怪。

1.vue的页面编写，也就是app.vue这个文件作为主入口文件，当然这个主入口文件也可以自定义命名，但自定义的入口文件呢需要去main.js这个文件中配置，在这呢不涉及路由和数据，仅仅从初学入手，简答的搭建一个页面。

 

import Vue from ‘vue‘

import App from ‘./App.vue‘

import ‘./registerServiceWorker‘

// import router from ‘./router‘

import store from ‘./store‘

import ElementUI from ‘element-ui‘

import ‘element-ui/lib/theme-chalk/index.css‘

 

Vue.config.productionTip = false

Vue.use(ElementUI)

new Vue({

  // router,

  store,

  ElementUI,

  render: h => h(App)

}).$mount(‘#app‘)

2.我们可以新建一个views或者一个 components这样一个文件夹，在这里面创建一两个个组件，组建创建完成先不忙着写组件。

  1）.首先先将组件引入到app.vue中。

<template>

  <div id="app">

    <div id="nav">

     <div>

       <Top></Top> //作为标签使用④

     </div>

     <div class="ve-app">

       <Left class="ve-Lt"></Left>

       <Right class="ve-Rt"></Right>

     </div>

     <div>

       <Foot></Foot> //这就是标签

     </div>

    </div>

    <!-- <router-view/> -->

  </div>

</template>

<script>

     //别名②

import Top from ‘./components/Top.vue‘//引入路径①

import Left from ‘./components/Left.vue‘

import Right from ‘./components/Right.vue‘

import Foot from ‘./components/Foots.vue‘

export default {

  components: {

    Top,//作为标签③

    Left,

    Right,

    Foot

  }

}

</script>

 

<style>

.ve-app{

  display: flex;

  justify-content: space-between;

}

.Lt{

  width: 30%;

  height: 500px;

}

.Rt{

  width: 70%;

}

</style>

　2）.再来写组件：

<template>

  <div class="ve-right">

    <img src="../assets/12.jpg"/>

  </div>

</template>

 

<script>

export default {

}

</script>

<style>

.ve-right{

  background: yellow;

  height: 300px;

}

.ve-right img{

  height: 300px;

}

</style>

 

 

这样一个简单的vue页面就完成了。刚开始确实有点绕，下一个随手路由。