vue和elementUI的综合使用

1.安装vue-cli

首先要保证自己电脑有安装过node js ,打开cmd ，输入node -v ，出现以下图片说明已经安装过了

安装完成后，打开任意磁盘，新建文件夹vue-test,在cmd找到vue-test目录

国内访问npm比较慢，可以使用淘宝镜像npm，输入命令 ：

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

安装完成后使用命令 cnpm install vue 和 cnpm install vue-cli -g 使用-g的意思是使用全局安装vue-cli

cnpm install vue

cnpm install vue-cli -g

安装完成过后可以初始化vue-cli了

vue init webpack
```![在这里插入图片描述](https://img-blog.csdnimg.cn/20200818210553516.png#pic_center)

是不是安装到当前文件夹如果不想可以使用命令

vue init webpack myh5 --安装到myh5文件夹中

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200818210819115.png#pic_center)
**这样模板已经安装完成了**
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200818211019422.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ2NTYwOQ==,size_16,color_FFFFFF,t_70#pic_center)
初始化完成后输入命令：

cd myh5 & npm run dev

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200818211244762.png#pic_center)
打开浏览器输入：http://localhost:8081 （端口号8081是我的电脑上使用，每台电脑可能不一样）

 生成的文件夹：
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200818211313744.png#pic_center)
**2.结合element-ui**
安装element-ui，使用命令(官方给出的安装少了file-loader，导致引用css文件报错，所以一起安装了)：

cnpm install element-ui --save

cnpm install element-theme -g (使用全局安装，后面使用少坑)

cnpm install element-theme-chalk -D

cnpm install file-loader --save

**初始化element-ui的css文件，输入命令：**

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200818211840512.png#pic_center)

et -i

**会在当前目录生成一个文件element-variables.sass，再次输入命令：
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200818211936860.png#pic_center)
**


et -o src/theme-et/ --意思是在src/theme-et文件夹下初始化

**按图打开文件：**
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200818212121509.png#pic_center)

**在index.js文件里面加入下面代码

**`import ElementUi from 'elemet-ui'
import '@/theme-et/index.css'
Vue.use(ElementUi)
`
**添加后的文件夹内容：**

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200818212231677.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ2NTYwOQ==,size_16,color_FFFFFF,t_70#pic_center)
然后打开 HelloWorld.vue文件将class="hello"这个div整个删除只剩下<template></template>：

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200818212311803.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ2NTYwOQ==,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/2020081821232594.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ2NTYwOQ==,size_16,color_FFFFFF,t_70#pic_center)
然后加入：

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200818212425441.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ2NTYwOQ==,size_16,color_FFFFFF,t_70#pic_center)


**保存后打开cmd，输入命令：npm run dev**