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