Comprehensive use of vue and elementUI

1. Install vue-cli

First of all, make sure that you have installed node js on your computer, open cmd, enter node -v, and the following picture appears to indicate that it has been installed. After the

installation is complete, open any disk, create a new folder vue-test, and find the vue-test directory in cmd

The domestic access to npm is slow, you can use Taobao mirror npm, enter the command:

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

After the installation is complete, use the commands cnpm install vue and cnpm install vue-cli -g to use -g means to install vue-cli globally

cnpm install vue

cnpm install vue-cli -g

After the installation is complete, you can initialize vue-cli

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

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

vue init webpack myh5 - install into myh5 folder

![在这里插入图片描述](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 (Use global installation, use less pit later)

cnpm install element-theme-chalk -D

cnpm install file-loader --save

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

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

and -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**