uniapp——接入element

目录

前言

一、引入element

二、使用步骤

1.在main.js里面添加

2.在想要页面里面添加

总结

---

前言

我们在开web开发的时候，经常会使用到element或者uview-ui，本篇文章主要讲解如何在uniapp中接入element。下面来看看使用element的el-radio组件的效果图

---

一、引入element

首先鼠标在项目中右键--使用命令窗口打开所在目录，

 输入：D:\wangyao\HBuilderX\plugins\npm\npm install npm i element-ui -S 

 注意：D:\wangyao\HBuilderX\plugins\npm\    是你自己安装npm的路径，如果你的npm是设置了全局路径就可以不用填，主要是使用npm运行命令：npm install npm i element-ui -S 

 命令运行之后会生成一个node_modules文件，代表已经引入成功

二、使用步骤

1.在main.js里面添加

import Vue from 'vue'
import App from './App'
// 使用element
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false
App.mpType = 'app'

// 使用element
Vue.use(ElementUI)

const app = new Vue({
    ...App
})
app.$mount()

2.在想要页面里面添加

<template>
	<el-container>
		<el-radio v-model="radio" label="1">备选项11</el-radio>
		<el-radio v-model="radio" label="2">备选项22</el-radio>
	</el-container>
</template>

<script>
	export default {
		data() {
			return {
				radio: '1'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>

</style>

---

总结

1. 导入：npm install npm i element-ui -S 
2. main.js里添加引入
3. 在所需的页面上使用即可