ElementUI入门安装指南

ElementUI入门安装指南

导读

本人初学之时，也是一顿萌，在查看了好多资料之后总结此篇博客，希望对初学者有所帮助！
话不多说，上步骤

1.创建一个文件夹，打开终端，在终端地址输入 cmd，进入node
2.初始化一个记录本，记录安装的模块

npm init -y  

3. 在全局安装脚手架

npm install -g vue-cli 

4.创建一个基于webpack模板项目vue-book

vue init webpack vue-book  

5.按图操作

6.按图操作

7.按图操作

8.按图操作

9.按图操作

10.按图操作

11.按图操作

12.按图操作

13.建议选择第一个

14.进入项目所在地址

cd vue-book

15.安装环境依赖

npm install

16启动运行项目

npm run dev

出现此页面运行成功，复制图中地址进入浏览器地址栏打开即可显示17图片

17.出现此页面安装成功

18.安装element-ui

   npm install element-ui -S // 官网命令

19.查看package.json看里面是否有element-ui，如果有element-ui 表示安装成功

20.在 src中的 main.js 文件内 引入如下代码

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

21.没有报错，就可以正常运行
22.下面需要更改 HelloWorld.vue的内容 即可实现效果
例：

页面效果

注意：html 一定要有 template 和div标签哦

最后：官网地址：https://element.eleme.cn/#/zh-CN

																个人总结，如有侵权，请告知