Is the front-end based on the ul-element team JS 2.0 desktop UI framework, a set of desktop component library based on Vue 2.0 prepared for developers, designers and product managers. The corresponding framework on the mobile terminal is Mint UI.

Chinese documents: http://element-cn.eleme.io/#/zh-CN
github address: https://github.com/ElemeFE/element

1: Install node

Both the end-to-end development framework and environment need node JS, install node JS development environment, the operation of vue depends on the npm management tool of node https://nodejs.org/en/ , after the installation is completed, open cmd and start entering commands. (I use win10 system, so I need administrator permission. Right click to run cmd as administrator). Otherwise, many errors will appear.

2: View the version number of node

After downloading the node, open the cmd management tool as an administrator, enter node -v, press enter, and check the node version number. If the version number appears, the installation is successful.

Enter command: node -v

3: Install Taobao npm image

Since npm is foreign and slow to use, we use the cnpm image of Taobao to install vue
Taobao's cnpm command management tool can replace the default npm management tool.

Enter command: npm install -g cnpm --registry=https://registry.npm.taobao.org

4: Installation of global vue-cli scaffold

After the Taobao image is successfully installed, we can the global vue cli scaffold and enter the command: cnpm install -- global vue cli enter; Verify whether the installation is successful, enter vue in the command, get the information of vue, and explain that the installation is successful;

Enter command: cnpm install --global vue-cli

####5: Start entering the topic and initialize a vue project
I'm creating a new project in disk d. first, use the command of d: and press enter to enter disk d; Press enter to create project information by default.

vue init webpack itemname

If such a prompt appears, the initialization is successful

Run the initialization demo and enter the command npm run dev; Run the initial demo and pop up the access address. If there is no problem, install elementUI; When you are ready, start introducing the hungry elementUI component.

####6: Install elementUI

npm i element-ui -S

Shortcut key ctrl+c, terminate the batch operation (Y/N), and enter the command NPM I element UI - S

######Note: when such a bug occurs during installation, it needs to be solved

Solution: try deleting package lock. In the project JSON file and node_modules folder, and then try npm install

The successfully installed components are shown below

#####7: Under the components folder, create test Vue file, copy a piece of code from the official document of elementUI and test it

<template>
	<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
		<el-menu-item index="1">Processing center</el-menu-item>
		<el-submenu index="2">
			<template slot="title">My workbench</template>
			<el-menu-item index="2-1">Option 1</el-menu-item>
			<el-menu-item index="2-2">Option 2</el-menu-item>
			<el-menu-item index="2-3">Option 3</el-menu-item>
		</el-submenu>
		<el-menu-item index="3">
			<a href="https://www.ele. me" target="_ Blank "> order management</a>
		</el-menu-item>
	</el-menu>
</template>

<script>
	export default {
		data() {
			return {
				activeIndex: '1',
				activeIndex2: '1'
			};
		},
		methods: {
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			}
		}
	}
</script>

####8: On app Introduce test. Into Vue vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
    <Test></Test>
  </div>
</template>

<script>
	import Test from './components/test.vue'
	
export default {
	components:{
  Test,
 },
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

####9: Open main js, add js and css of element UI

import ElementUI from 'element-ui' //All components of element UI
import 'element-ui/lib/theme-chalk/index.css'//css of element UI
Vue.use(ElementUI) //Using elementUI

####10: Run again, and the effect in the component is as follows:

Enter command:

npm run dev