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頁面就完成了。剛開始確實有點繞，下一個隨手路由。