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

一、创建组件

   （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>

 右键|运行项目

访问路径：default

 

 

原文地址：https://blog.csdn.net/hlx20080808/article/details/142854110

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！