一、环境安装以及项目创建
1. 项目创建说明
Babel:转码器
historyMode：在访问的时候取消#号
hashMode：在访问的时候有#号
2. 启动项目
退出项目ctrl+c
3. 项目说明
- node_modules:用来存放包管理工具下载的安装包文件夹
- public:公共资源（图表，index html文件）
- src:源文件
- 配置文件，说明文档
- package.json:项目依赖文件
- build：项目打包命令
- ^3.6.5:版本不能低于3.6.5，不能修改大版本号
- ~5.0.0：不能低于5.0.0:，不能修改大版本号和次要版本号
- dependencies与devdependencies:依赖；dev(开发模式下的依赖)
- 添加配置，在文件下添加vue.cofig.js（跨域后添加代理，追加任务）
module.exports = { devserver:{ port:8088, host:"localhost", open:'true'//配置浏览器自动访问 } }
二、elementUI（网站快速成型工具）
- main.js
- ./同级；…/上一级；@/根目录下
- 不写来源于依赖文件
- render:渲染app
- 路由之间的关系（结构的分配）
- 定义views下的各个文件夹和文件
- 配置路由
1. 安装
npm i element-ui -S
2.快速上手
1. import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
3.组件
4. 登录页
- 引入Form表单
ruleForm：数据
rules：校验规则 - js中单独定义数据方法
定义data时为什么添加return返回（v-mode）
具体校验：（提示信息，长度） - 登录按钮
需要再methods中添加事件:页面跳转
router和route有什么不同<template> <div class="login"> <p>简简单单的学学前端</p> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <!-- 姓名 --> <el-form-item label="姓名" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> <!-- 密码 --> <el-form-item label="密码" prop="password"> <el-input type = "password" v-model="ruleForm.password"></el-input> </el-form-item> <!-- 登录 --> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button> </el-form-item> </el-form> </div>
- script代码
export default{
data(){
return{
ruleForm:{ //初始化账号密码
name:"",
password:"",
},
rules:{ // 验证
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
],
}
}
},
methods:{
submitForm(){
this.$router.push("/home")
}
}
}
5. 首页
- 布局容器(container)
- 样式文件(style)
- 导航菜单（NavMenu）
default-active：默认选择的导航样式
导航菜单一直在，所以要放在外面
判断有无子集 - 路由设置,多级路由设置
首页子路由（children[]）{ path: '/home',// 首页[布局页] name: 'home', component: () => import('../views/home/index.vue'), children:[ { path: '/index',// 首页 name: 'index', component: () => import('../views/home/index/index.vue'), }, { path: '/stats',//数据管理 name: 'stats', component: () => import('../views/home/stats/index.vue') }, { path: '/wms',//信息管理 name: 'wms', component: () => import('../views/home/wms/index.vue'), children:[ { path: '/wms/list',//信息列表 name: 'wmsList', component: () => import('../views/home/wms/list.vue'), } ] }, }
6.axios交互
- 在创建后端环境是出现了跨域问题
- 解决方法
# 后端使用django
pip install django-cors-headers
setting.py文件
INSTALLED_APPS = [
...
# demo
'corsheaders',
...
]
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware', # 需注意与其他中间件顺序，这里放在最前面即可
...
]
#支持跨域配置开始
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True
- 安装axios
npm i axios --save
- 引入方式
- main.js全局引入
import axios from 'axios' Vue.prototype.$http = axios; axios.defaults.baseURL = "http://localhost:16365/"- 请求响应拦截器（单独创建js文件）
import axios from "axios"; axios.defaults.baseURL = "http://localhost:16365/" // 添加请求拦截器 axios.interceptors.request.use(config=>{ return config }) // 添加响应拦截器 axios.interceptors.response.use(res=>{ return res },err=>{ return Promise.reject(err) }) export default axios; - 使用axios
# 第一种写法
axios({
method:'post',
url:'/web/login/',
data:{name:name,password:password}
}).then(res=>{
console.log(res)
}).catch(err=>{
console.log(err)
})
} else {
console.log('error submit!!');
return false;
}
#第二种写法
axios.post('/web/login/',{
name: '11111',
password:'11111111',
}).then(function(res){
console.log(res)
}).catch(function(error){
console.log(error)
})
7.左侧导航栏无限级
<template>
<el-aside width="200px" class="aside">
<el-menu
:default-active="$router.path" exact
class="el-menu-vertical-demo" router>
<NavItem v-for="v in items" :key="v.url" :item="v" :basePath="v.url"/>
</el-menu>
</el-aside>
</template>
<script>
import NavItem from './NavItem.vue'
export default{
data(){
return{
items:[
{name:'首页',url:'/index'},
{name:'数据管理',url:'/stats'},
{
name:'信息管理',
url:'/wms',
child:[
{name:'列表管理',url:'/wms/list'}
]
},
{
name:'用户管理',
url:'/user',
child:[
{name:'用户统计',url:'/user/stats'},
{name:'角色统计',url:'/user/role'},
]
},
]
}
},
components:{NavItem},
}
</script>
<template>
<div>
<!-- 无子集 -->
<el-menu-item :index="basePath" v-if = "!item.child">
<i class="el-icon-menu"></i>
<span slot="title">{{item.name}}</span>
</el-menu-item>
<!-- 有子集 -->
<el-submenu :index="basePath" v-else>
<template slot="title">
<i class="el-icon-menu"></i>
<span slot="title">{{item.name}}</span>
</template>
<NavItem v-for="sub in item.child" :key="sub.url" :item="sub" :basePath="sub.url"/>
</el-submenu>
</div>
</template>
<script>
export default{
name:'NavItem',
data(){
return{
}
},
props:['item','basePath'], //父传给子的数据
methods:{
}
}
</script>
8.面包屑
-
数据动态展示
在路由中添加展示数据meta:{title:‘首页’}{ path: '/index',// 首页 name: 'index', meta: {title:'首页'}, component: () => import('../views/home/index/index.vue'), }, -
js代码
export default{
data(){
return{
lists:[]
}
},
methods:{
},
components:{
},
mounted(){
this.lists = this.$route.matched
console.log(this.$route.matched)
}
}
3 .添加监听
watch:{
$route(to,from){
this.lists = to.matched;
}
},
9.首页走马灯（轮播）和card卡片
- 走马灯
<!-- 走马灯卡片 -->
<el-carousel :interval="4000" type="card" height="200px">
<el-carousel-item v-for="item in imgLists" :key="item">
<img :src="item" >
</el-carousel-item>
</el-carousel>
2.卡片
<el-row :gutter="20">
<el-col :xs = "24" :sm="12" :md="6" :span="6" v-for="(o, index) in cardLists" :key="o.img" >
<el-card :body-style="{ padding: '0px' }">
<img :src="o.img" class="image">
<div style="padding: 14px;">
<span>{{o.title}}</span>
<div class="bottom clearfix">
<time class="time">{{ o.title }}</time>
<el-button type="text" class="button">操作按钮</el-button>
</div>
</div>
</el-card>
</el-col>
</el-row>
- 响应式布局
<el-col :xs = "24" :sm="12" :md="6" :span="6" v-for="(o, index) in cardLists" :key="o.img" >
10.table组件数据交互，数据筛选
- table组件
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
<script>
export default{
data(){
return{
tableData:[{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}],
}
}
}
</script>
2.斑马纹
<el-table
:data="tableData"
stripe
style="width: 100%">
- 动态数据
<script>
import axios from '@/api';
export default{
data(){
return{
tableData:[],
}
},
methods:{
getTable(){
axios({
method:'get',
url:'/web/tableList',
params:{}
}).then(res=>{
let{code,result} = res.data
if (code==1){
this.tableData=result
}
}).catch(error=>{
console.log(error)
})
}
},
mounted() {
this.getTable()
}
}
</script>
注意：then使用=>,若不适用{}中的this不会指向数据中的tableData。
- 排序
# 只需添加sortable即可
<el-table-column
prop="date"
label="日期"
sortable
width="180">
</el-table-column>
- 筛选
<el-table-column
prop="tag"
label="标签"
width="100"
:filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
:filter-method="filterTag"
filter-placement="bottom-end">
<template slot-scope="scope">
<el-tag
:type="scope.row.tag === '家' ? 'primary' : 'success'"
disable-transitions>{{scope.row.tag}}</el-tag>
</template>
</el-table-column>
filterTag(value, row) { //标签筛选
return row.tag === value;
},
filterHandler(value,row,column){
// const property = column['property'];
// return row[property] === value;
return row.date === value;
}
},
- 筛选动态展示
filterHandler(value,row,column){
//value 点击的是哪一个（对象）
// row
// column
// propety 属性是谁
const property = column['property'];
return row[property] === value;
// return row.date === value;
}
11.折叠面板+会话框组件
- 折叠面板+卡片+手风琴效果（accordion）
<template>
<div>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>列表展示</span>
<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
</div>
<el-collapse v-model="activeNames" accordion>
<el-collapse-item v-for="v in items" :key="v.id" :title="v.title" :name="v.id">
<div v-for="(c,i) in v.content" :key="i">{{ c }}</div>
</el-collapse-item>
</el-collapse>
</el-card>
</div>
</template>
<script>
export default{
data(){
return{
activeNames:"",// 加载后展示的数据
items:[
{
id:"1",
title:"一致性 Consistency",
content:[
"与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；",
"在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。"
]
},
{
id:"2",
title:"反馈 Feedback",
content:[
"控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；",
"页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。"
]
},
{
id:"3",
title:"效率 Efficiency",
content:[
"简化流程：设计简洁直观的操作流程",
"清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；",
"帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。"
]
},
{
id:"4",
title:"可控 Controllability",
content:[
"用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；",
"结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。"
]
},
]
}
},
mounted(){
this.activeNames = this.items[0].id
}
}
</script>
- 数据添加+弹框
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="submit">确 定</el-button>
</span>
</el-dialog>
- 数据动态展示
getItem(){
axios({
method:"get",
url:"/web/wmsList",
params:{},
}).then(res=>{
let {code,result} = res.data
if(code ==1){
this.items = result
this.activeNames=this.items[0].id || 1
}
}).catch(error=>{
console.log(error)
})
},
submit(){
this.dialogVisible=false;
// 添加不同的id
let _id = Math.max(...this.items.map(v=>v.id))+1
this.items.push({
id:_id,
title:`一致性 Consistency==${_id}`,
content:[
"与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；",
"在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。"
]
})
}
},
965
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
