vue.js

最新推荐文章于 2025-04-14 18:53:15 发布

原创最新推荐文章于 2025-04-14 18:53:15 发布 · 119 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

0 篇文章

订阅专栏

    **VUE**   
    
    **小生不才如有不对请多指教**
      如何使用vue建立页面

第一步

详情参照 下图1-1
1. 首先在index.html里引入重置样式css

<link rel="stylesheet" href="/static/reset.css">

**2.**在body里面建立主页面大组件

<div id="app">

    </div>

**3.**在script里面添加计算转换

 <script>

    refresh();
    window.onresize = function(){

      setTimeout(function(){
        refresh();
      },10)
    };
    function refresh() {
      let deviceWidth = document.documentElement.clientWidth;
      if (deviceWidth > 1200) {
        document.documentElement.style.fontSize = 1200 / 12 + "px";
      } else {
        document.documentElement.style.fontSize = deviceWidth / 7.5 + "px";
       // console.log(deviceWidth / 7.5+ "px");
      }
    }
  </script>

**4**.为了让页面初始化在style里面添加样式

    <style>
	    #app{
	      margin:0;
	      padding:0;
	      position: relative;
	      top:-2.1rem;
	      overflow: hidden;
	    }
  </style>

图1-1

index.html页面图片详情

第二步
详情请参照 下图1-2

1.打开 src 文件夹在App.vue里面创建模板和组件

<template>   //模板标签
	  <div id="app">
	    <v-header>   //头部组件
	    </v-header>
	    <v-body>     //主题组件
	    </v-body>
	    <v-footer>    //底部组件
	    </v-footer>
	  </div>
</template>

2.在 script 里面引入组件地址 / 激活组件

<script>
	import vheader from '@/components/vheader/vheader.vue'        //组件地址
	import vbody from '@/components/vbody/vbody.vue'
	import vfooter from '@/components/vfooter/vfooter.vue'
export default {
  name: 'App',
  components: {
    vHeader: vheader,   //激活组件
    vBody: vbody,
    vFooter: vfooter
  },
  beforeCreate () {
    this.$store.commit('GETDATA')
  }
}
</script>

图1-2
在这里插入图片描述

3.在 src 文件里的 main.js 里引入所要用到文件 / 激活组件/模板
详情参照下图1-3

import Vue from 'vue'      //引入vue
import App from './App'    // 引入组件app

new Vue({
  el: '#app',
  components: { App }, //组件
  template: '<App/>'  //模板
})

图1-3
在这里插入图片描述

4.在 src 文件里创建 components 文件在 components 文件里创建 vbody 文件在 vbody 里面创建 vue文件 vbody.vue
详情参照下图1-4

1 创建模板文件

<template>
  <div>
      <div class="body-top">
      </div>
  </div>
</template>

2 在 script 里添加

<script>
		export default {
		  name: 'vbody'
		}
</script>

3在style里添加样式

<style scoped >
    .body-top{
      height: 0.8rem;
         display: flex;
         justify-content: center;
         align-items: center;
         border-bottom: 1px solid rgba(7,17,27,0.1);
    }
    a{
      width: 33%;
      text-align: center;
      font: 0.28rem/0.28rem '';
      color: rgb(77,85,93);
    }
  .act{
    color: rgb(240,20,20);
  }
</style>

到这里一个vue页面就建成了，你会了吗赶快试一下吧

小生不才如有不对请多指教