Vue框架（一）------框架初识

一、框架概念

1.1 UI框架：

• 书面说法：一组封装好的代码文件，只需要学会调用规则即可实现相应效果，而不需要知道如何实现
• 通俗说法：完成了从别人网站抠代码来实现某一网页的操作，框架还提供说明书教你怎么抠

1.2 Vue常用框架：

• 脚手架安装点击此处
• Vuetify
  • 简介：传送门，国外最知名
  • 推荐指数：低，文档对中文不太友好，参数说明不太上心
• Element UI
  • 简介：传送门，国内最知名，饿了么维护
  • 推荐指数：中，文档对中文最友好，但还是需要手动写部分CSS
• Quasar
  • 简介：传送门，国外知名，组件巨多
  • 推荐指数：高，文档对中文友好，考虑很细

二、栅格系统

• 栅格系统：
  • 实现效果：响应式（不同设备排版自动变化）
  • 原理：css的媒体查询@media
• 此处以bootstrap框架说明
  
• 排版示意
  
• 代码示意

  <!-- 容器盒子：对应示意图的红色框 -->
  <div class="container">
  	<!-- 行盒子：对应示意图的蓝色框 -->
  	<div class="row">
  	  <!-- 列盒子：对应示意图的灰色框 -->
  	  <div class="col-md-1">.col-md-1</div>
  	  <div class="col-md-1">.col-md-1</div>
  	  <div class="col-md-1">.col-md-1</div>
  	  <div class="col-md-1">.col-md-1</div>
  	  <div class="col-md-1">.col-md-1</div>
  	  <div class="col-md-1">.col-md-1</div>
  	  <div class="col-md-1">.col-md-1</div>
  	  <div class="col-md-1">.col-md-1</div>
  	  <div class="col-md-1">.col-md-1</div>
  	  <div class="col-md-1">.col-md-1</div>
  	  <div class="col-md-1">.col-md-1</div>
  	  <div class="col-md-1">.col-md-1</div>
  	</div>
  	<div class="row">
  	  <!-- 列盒子：以下写法即响应式，根据不同尺寸变化排版，未写的类为12，有顺序 -->
  	  <!-- class="col-md-8 col-xs-6" -->
  	  <div class="col-md-8">.col-md-8</div>
  	  <!-- class="col-md-4 col-xs-6" -->
  	  <div class="col-md-4">.col-md-4</div>
  	</div>
  	<div class="row">
  	  <div class="col-md-4">.col-md-4</div>
  	  <div class="col-md-4">.col-md-4</div>
  	  <div class="col-md-4">.col-md-4</div>
  	</div>
  	<div class="row">
  	  <div class="col-md-6">.col-md-6</div>
  	  <div class="col-md-6">.col-md-6</div>
  	</div>
  </div>
  

建议：每个框架都有栅格系统，建议选择一个主力框架，使用其栅格系统，其他框架仅使用组件，感觉QUASAR比较好

三、框架使用演示

3.1 创建组件文件

以vuetify为例，假如想使用日历：传送门

1. 进到组件页面，找到喜欢的样式
   
2. 找到组件的HTML和JS
   
3. 到/src/views/文件夹下新建calendar.vue文件

   <template>
    	<!-- 从步骤2中拷贝的HTML文件 -->
   </template>
   
   <script>
   	// 从步骤2中拷贝的脚本文件
   </script>
   

3.2 使用组件

• 代码

  <template>
  	...
  	<div>
  		<!-- 2.使用组件 -->
  		<calender/>		
  	</div>
  	...
  </template>
  
  <script setup lang='ts'>
  	...
  	// 1.引入组件
  	import calender from '@/views/calender.vue'		
  	...
  </script>
  

  相同的部分此处都以点号代替

• 显示(乱放的)
  

跳转至vue总篇目录