目录
unable to verify the first certificate
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: '<App/>'
})
修改 Car.vue
至此，一个基于 Vue 和 Element 的开发环境已经搭建完毕，现在就可以使用Element代码了。
<template>
<!-- 获取值 -->
<div>
<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>
<el-button type="primary" icon="el-icon-search">搜索</el-button>
{
{msg}}
</div>
<!-- <h1>{
{msg}}</h1> 报错,只能有一个根标签 -->
</template>
<script>
// 定义导出的组件
export default{
name:'Item',
data(){
return{
msg:'京淘电商管理系统'
}
}
}
</script>
<style>
</style>
基础知识
布局 layout
栅格体系：把页面分成24分栏，可以形成PC端、移动端自适应。
<template>
<div>
<!-- 2.使用ele的栅格,默认24列,可以自适应屏幕的宽度 -->
<!-- el-row表示行,el-col表示列 ,:span合并列数-->
<el-row>
<el-col :span="24">123</el-col>
</el-row>
<el-row>
<el-col :span="12">abc</el-col>
<el-col :span="12">123</el-col>
</el-row>
</div>
</template>
<script>
// 定义导出的组件
export default{
name:'Item',
data(){
return{
msg:'京淘电商管理系统'
}
}
}
</script>
<style>
</style>
图标 icon
https://element.eleme.cn/#/zh-CN/component/icon
<template>
<!-- 获取值 -->
<div>
<!-- 1.使用ele的各种图标-->
<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>
<i class="el-icon-eleme"></i>
</div>
</template>
<script>
// 定义导出的组件
export default{
name:'Item',
data(){
return{
msg:'京淘电商管理系统'
}
}
}
</script>
<style>
</style>
按钮 button
https://element.eleme.cn/#/zh-CN/component/button
<template>
<!-- 获取值 -->
<div>
<!-- 1.使用ele的各种按钮-->
<el-button type="primary" icon="el-icon-search">搜索</el-button>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</div>
</template>
<script>
// 定义导出的组件
export default{
name:'Item',
data(){
return{
msg:'京淘电商管理系统'
}
}
}
</script>
<style>
</style>
输入框 input
<el-input placeholder="用户名" v-model="msg"></el-input>
<el-input placeholder="密码" v-model="msg" show-password></el-input>
<script>
export default {
data() {
return {
input: ''
}
}
}
</script>
表格 table
<template>
<!-- 获取值 -->
<div>
<!-- 3.使用ele的表格,a创建表格,b准备数据,c绑定数据 -->
<el-row >
<el-button type="info" @click="toadd">新增</el-button>
</el-row>
<el-table :data="list">
<el-table-column label="编号" prop="id"></el-table-column>
<el-table-column label="标题" prop="title"></el-table-column>
<el-table-column label="卖点" prop="sell"></el-table-column>
<el-table-column label="描述" prop="desc"></el-table-column>
<el-table-column label="更多">
<el-button type="primary" @click="toupdate()">编辑</el-button>
<el-button type="success" @click="del()">删除</el-button>
</el-table-column>
</el-table>
</div>
</template>
<script>
// 定义导出的组件
export default{
name:'Item',
data(){
return{
msg:'京淘电商管理系统',
// b. 准备表格要的数据
list:[
{
id:100,
title:'鸿星尔克',
sell:'为中国代言',
desc:'to be no.1'
},
{
id:101,
title:'蜜雪冰城',
sell:'一瓶只赚1毛钱',
desc:'你爱我我爱你蜜雪冰城甜蜜蜜'
},
{
id:102,
title:'特步',
sell:'有一种踩.的感觉',
desc:'飞一样的感觉'
}
]
}
},
// 1,声明按钮 2,添加事件methods 3,给按钮绑定事件@click
methods:{
toadd:function(){
console.log("新增业务成功")
},
toupdate:function(){
console.log("修改业务成功")
},
del:function(){
console.log("删除成功")
}
}
}
</script>
<style>
</style>
表单 form
<template>
<!-- 获取值 -->
<div>
<!-- 制作表单 el-form表示表单,el-form-item表示表单项
1,数据区提供数据 2,给form指定双向绑定:model="form" 3,input双向绑定获取数据v-model="form.price"
-->
<el-form label-width="100px" :model="form">
<el-form-item label="标题">
<el-input placeholder="请输入标题" v-model="form.title"></el-input>
</el-form-item>
<el-form-item label="卖点">
<el-input v-model="form.sell"></el-input>
</el-form-item>
<el-form-item label="价格">
<el-input v-model="form.price"></el-input>
</el-form-item>
<el-form-item label="详情">
<el-input type="textarea" v-model="form.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button @click="save()" type="success">保存</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
// 定义导出的组件
export default{
name:'Item',
data(){
return{
msg:'京淘电商管理系统',
//给表单准备数据,数据驱动,双向绑定
msg:'hi components',
form:{
title:"test",
sell:'爆款热销',
price:999,
desc:"我是详情..."
},
}
},
// 1,声明按钮 2,添加事件methods 3,给按钮绑定事件@click
methods:{
save:function(){ //表单提交
// console.log("submit")
console.log(this.m) //调用上面的变量m
}
}
}
</script>
<style>
</style>
常见错误
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 就可以了
项目案例：商品后台管理系统
界面原型
