Vue框架Element UI安装环境搭建

朱雀 2022-12-05 10:30 220阅读 0赞

Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，手机端有对应框架是Mint UI 。

中文文档：[http://element-cn.eleme.io/\#/zh-CN][http_element-cn.eleme.io_zh-CN]  
github地址：[https://github.com/ElemeFE/element][https_github.com_ElemeFE_element]

![图片.png][.png]

### 1：安装node ###

端开发框架和环境都是需要 Node.js ，先安装node.js开发环境，vue的运行是要依赖于node的npm的管理工具来实现，下载[https://nodejs.org/en/][https_nodejs.org_en]，安装完成之后，打开cmd开始输入命令。（我用的是win10系统，所以需要管理员权限，右键点击以管理员身份运行cmd），不然会出现很多报错。

![image][]

### 2：查看node的版本号 ###

下载好node之后，以管理员身份打开cmd管理工具，，输入 node -v ，回车，查看node版本号，出现版本号则说明安装成功。

输入命令： node -v

![image][image 1]

### 3：安装淘宝npm镜像 ###

由于npm是国外的，使用起来比较慢，我们这里使用淘宝的cnpm镜像来安装vue.  
淘宝的cnpm命令管理工具可以代替默认的npm管理工具。

输入命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

![image][image 2]

### 4：安装全局vue-cli脚手架 ###

淘宝镜像安装成功之后，我们就可以全局vue-cli脚手架，输入命令：cnpm install --global vue-cli 回车；验证是否安装成功，在命令输入vue，出来vue的信息，及说明安装成功；

输入命令：cnpm install --global vue-cli

![image][image 3]

\#\#\#\#5：开始进入主题，初始化一个vue项目  
我这里是在d盘里面新建一个项目，先用`d:`的命令，回车键进入d盘；回车键默认创建项目信息。

vue init webpack itemname

![图片.png][.png 1]

出现这样的提示，初始化成功  
![图片.png][.png 2]

运行初始化demo，输入命令npm run dev；运行一下初始后的demo，弹出访问地址，如果没有问题则进行安装elementUI；准备好好之后，开始引入饿了么elementUI组件。

\#\#\#\#6：安装 elementUI

npm i element-ui -S

快捷键ctrl+c,终止批处理操 作吗(Y/N)，在输入命令npm i element-ui -S  
![图片.png][.png 3]

\#\#\#\#\#\#注意：安装过程中出现这样的bug的时候，需要解决  
![图片.png][.png 4]  
解决办法：尝试 删除项目中的 package-lock.json 文件 和 node\_modules 文件夹，然后再尝试 npm install.

成功安装组件显示如下  
![图片.png][.png 5]

\#\#\#\#\#7：在components文件夹下面创建test.vue文件，复制一段elementUI官方文档的代码，进行测试  
![图片.png][.png 6]

<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">处理中心</el-menu-item>
    		<el-submenu index="2">
    			<template slot="title">我的工作台</template>
    			<el-menu-item index="2-1">选项1</el-menu-item>
    			<el-menu-item index="2-2">选项2</el-menu-item>
    			<el-menu-item index="2-3">选项3</el-menu-item>
    		</el-submenu>
    		<el-menu-item index="3">
    			<a href="https://www.ele.me" target="_blank">订单管理</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：在App.vue中引入test.vue  
![图片.png][.png 7]

<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：打开main.js,加入element-ui的js和css

import ElementUI from 'element-ui' //element-ui的全部组件
    import 'element-ui/lib/theme-chalk/index.css'//element-ui的css
    Vue.use(ElementUI) //使用elementUI

![beb68092b172b3483e141f40d410b20e.png][]

\#\#\#\#10：再次运行，组件中的效果如下：

输入命令：

npm run dev

![图片.png][.png 8]

--------------------

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]

[http_element-cn.eleme.io_zh-CN]: http://element-cn.eleme.io/#/zh-CN
[https_github.com_ElemeFE_element]: https://github.com/ElemeFE/element
[.png]: /images/20221123/4eba75907f744b66b1bce50d2344ef2a.png
[https_nodejs.org_en]: https://nodejs.org/en/
[image]: /images/20221123/7e306314096e4f278db6ca271c699964.png
[image 1]: /images/20221123/93e49b6882504a21a12bf5b96a5c561f.png
[image 2]: /images/20221123/3bece601741a4442847ffc9f4ac52a3a.png
[image 3]: /images/20221123/b5bed2666b08465b9600b10ea3633e3a.png
[.png 1]: /images/20221123/eb66b379318b491f915408fd72becd87.png
[.png 2]: /images/20221123/6366913fc3b348d48d5793d0b81f9e38.png
[.png 3]: /images/20221123/7ad2474d0f8c419ca078f5a0ef47338f.png
[.png 4]: /images/20221123/0ebb966167d04b0c8511354a042e0a95.png
[.png 5]: /images/20221123/24cf09fe1ba44ba6ad3534ca0648cf2f.png
[.png 6]: /images/20221123/9299313927a64c8698a4b5c6a4834498.png
[.png 7]: /images/20221123/6b4a56658ab148459ed7d53005a7056a.png
[beb68092b172b3483e141f40d410b20e.png]: /images/20221123/561ed1e011a5470a94812831ef75078d.png
[.png 8]: /images/20221123/aca92d6a07d54c03b97f60d343628e1a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/fb8c9e5a13cc44ca9e682507382caa05.png