五、伊森商城 前端基础-Vue 整合ElementUI快速开发 p28

目录

 一、安装

1、安装ElementUI

 2、在main.js文件中引入

2.1、引入ElementUI组件

 2.2、让Vue使用ElementUI组件

二、使用

1、在hello.vue组件使用单选框

 2、使用ElementUI快速搭建后台管理系统

2.1、修改App.vue

3、修改功能成动态显示

3.1、编写快速生成组件的模板

3.2、新建MyTable设置表格内容

3.3、 App.vue使用vue-router 的模式

3.4、配置路由

3.5、调用流程

---

 一、安装

1、安装ElementUI

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i element-ui -S

-S: 是--save的简写，表示这个包是生产依赖， 表示项目上线也要使用这个包,是可以省略不写的包名会被注册在package.json的dependencies里面，在生产环境下这个包的依赖依然存在。

-D: 是--dev的简写，开发依赖包
包名会被注册在package.json的devDependencies里面，仅在开发环境下存在的包用-D

安装好了以后，我们的element-ui信息在package.json里面都会有

 2、在main.js文件中引入

2.1、引入ElementUI组件

// 将element-ui导入，还有它的css样式也导进来
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

 2.2、让Vue使用ElementUI组件

// 让Vue使用ElementUI组件
// 后来在任何组件中都能使用ElementUI
Vue.use(ElementUI);

 

二、使用

1、在hello.vue组件使用单选框

<

去hello就会默认显示选择备选项2 

 2、使用ElementUI快速搭建后台管理系统

Element - 网站快速成型工具

2.1、修改App.vue

使用的是Container布局容器

3、修改功能成动态显示

首先将导航修改出用户列表和hello，点击用户列表显示用户信息，点击去hello显示hello

3.1、编写快速生成组件的模板

后来要经常编写Vue组件，每次自己写太麻烦了，所以我们定义一个组件模板，每次使用模板生成Vue的基本组件

文件 --> 首选项 --> 用户代码片段 --> 点击新建代码片段 -- 取名 vue.json 确定

{
	"生成 vue 模板": {
		"prefix": "vue",
		"body": [
			"",
			"",
			"",
			""
		],
		"description": "生成 vue 模板"
	}
}

 

组件快速生成只需要输入vue点击回车

即可快速生成组件模板

 

3.2、新建MyTable设置表格内容

将App.vue的表格内容复制过来

3.3、 App.vue使用vue-router 的模式

 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转，App.vue修改后的内容

3.4、配置路由

在router.index.js中配置

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// 导入刚刚写好的hello组件
import hello from '@/components/hello'
// @代表src
import MyTable from '@/components/MyTable'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/hello', //访问路径
      name: 'hello',  //名字叫hello
      component: hello //指定一个hello的模板，从上面导入了已经
    },
    {
      path: '/table',
      name: 'MyTable',
      component: MyTable
    }
  ]
})

 

3.5、调用流程

1、在vue中使用路由视图动态显示

2、在components中编写组件用于在中动态显示

3、配置路由，发送不同的请求，即可在中显示