element-ui

访问官网: https://element.eleme.cn/#/zh-CN/component/installation,查看组件指南

安装

在工程目录下,使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i element-ui –D # 下载资料,这可能要等几分钟

安装完成其文件保存在项目下的node_modules目录下：

修改 main.js,引入Element

你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。
你可以参考官网的【快速上手】

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false

import ElementUI from 'element-ui'; //导入element
import 'element-ui/lib/theme-chalk/index.css';//导入element的css
//以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。
Vue.use(ElementUI);//使用element

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

修改 Car.vue

至此，一个基于 Vue 和 Element 的开发环境已经搭建完毕，现在就可以使用Element代码了。

基础知识

布局 layout

栅格体系：把页面分成24分栏，可以形成PC端、移动端自适应。

图标 icon

https://element.eleme.cn/#/zh-CN/component/icon

按钮 button

https://element.eleme.cn/#/zh-CN/component/button

输入框 input

表格 table

表单 form

常见错误

Permission denied

权限不足，windows以管理员身份运行，mac命令前加sudo

 Unexpected end of JSON input while parsing near

 清除缓存，重新安装

npm cache clean --force

npm install

 unable to verify the first certificate

 

解决方法: 取消ssl验证：npm config set strict-ssl false,再次安装

vue-cli · Failed to download repo vuejs-templates/webpack: unable to verify the first certificate

 打开（如果不是默认的文件夹， 是自定义的文件夹路径的话就是在自定义文件夹的目录下）

C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\download\index.js 
将下面这行注释：rejectUnauthorized: process.env.npm_config_strict_ssl !== 'false'
然后改为：  rejectUnauthorized : false    
重新运行：  vue init webpack project-name  就可以了

 

 

项目案例：商品后台管理系统

界面原型