HBuilder X中搭建Vue-cli项目组件和路由以及UI库使用（二）

news2024/10/23 1:34:18

一、创建组件

（1）在vj1项目src|右键|vue文件

（2）组件常用模版

<!--该标签用于写HTML代码,必须有一个根标签,如下<div>是根标签-->
<template> 
	<div>
		首页
	</div>
</template>
 
<!--该标签用于写js代码,下面是固定格式return里写数据,methods里写函数-->
<script>
	export defaults{
		data(){
			return{
				
			}
		},
		methods:{
			
		}
	}
</script>
 
 
<!--该标签用于写css和之前一样-->
<style>
 
</style>

二、组件路由

组件路由：就是组件之间可以相互进行切换

vue router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

在终端输入命令进行安装:

npm i vue-router@3.6.5

下载完成后，在package.json能查看

在src目录下创建一个router包,并创建一个index.js文件

index.js文件如下：

import Vue from 'vue';
// 导入路由
import router from 'vue-router';

// 导入注册组件
import Book from '../Book.vue';
import Login from '../Login.vue';
import Register from '../Register.vue';

// 注册定义组件访问路径
Vue.use(router);

//创建路由对象
var rout=new router({
	routes:[
		{
			path:'/book',
			component:Book   //component后的组件名必须和import后的名字对应相同。
		},
		{
			path:'/login',
			component:Login
		},
		{
			path:'/reg',
			component:Register
		}
	]
});

//导出路由对象
export default rout;

3个vue组件分别是Book.vue , Login.vue , Register.vue ；

实现组件路由需要在index.js 中导入这三个组件,并分别为每一个组件定义一个访问地址,由path和component两个部分组成，path用来定义component所绑定的组件地址。component后的组件名必须和import后的名字对应相同。

注意:

(1) path:为组件路由定义访问地址,这个地址以/开始,名字可以任意取,建议和.vue文件(组件)名相同,但是是以小写字母开头

(2) component:这个是和你.vue文件(组件)的名字完全相同

启动项目访问的是Book.vue组件,在Book.vue组件中使用<router-link>组件来创建 Login.vue 和 Register.vue组件的链接

<template>
	<!-- 组件模版格式，组件中必须要有一个根标签 -->
	<div>
		欢迎来看图书 ~~~{{name}} ===》{{tel}} <p/>
		<router-link to="/login">登录</router-link><p/>
		<router-link to='/reg'>注册</router-link><p/>
		
	</div>
</template>

<script>
	// 导出组件
	export default{
		// 定义数据
		data() {
			return{
				name:'张霏霏',
				tel:110
			}
		},
		methods:{
			
		}
	}
</script>

<style>
</style>

在main.js中配置路由

在App.vue文件中添加<router-view>组件来展示对应的组件内容

三. Vue-cli项目中导入ElementUI框架

1. 使用命令下载ElementUI依赖

npm i element-ui -S

在package.json文件中出现ElementUI版本信息时表示导入成功

2. 在main.js文件中导入ElementUI

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

3.在Login.vue文件(组件)中的<template></template>标签中使用UI

<template>
	<div><p>登陆</p>
		<el-button>默认按钮</el-button>
		<el-button type="info">信息按钮</el-button>
		<el-button type="danger">危险按钮</el-button>
		<el-button type="primary">主要按钮</el-button>
		<el-button type="success">成功按钮</el-button>
		<el-button type="warning">警告按钮</el-button>
		<el-button type="text">文本按钮</el-button>
	</div>
</template>