1.Vue全家桶
vue.js,vue-router,vuex,axios,ES6,Sass/less/Stylus,…
- vue.js:computed,过滤器,自定义指令,绑事件(@事件名),绑属性(:属性名),组件通讯(3种)…
- vue-router:路由传参,路由守卫,嵌套路由,动态路由,路由懒加载…
- vuex:集中管理组件状态,5个要素:
state,mutation,action,modules,getters
- axios:数据请求
- 官网文档:https://github.com/axios/axios
- 中文文档:http://www.axios-js.com/zh-cn/docs/
- Sass:
2.Vue脚手架创建项目
2.1 安装脚手架
npm install -g @vue/cli //电脑中只安装一次即可
2.2 创建Vue项目
vue create 项目名
然后按照提示步骤操作:如下图
建议使用manually select eatures 手动安装
Eslint:代码质量检验工具
2.3 运行项目
npm run serve
App running at:
- Local: http://localhost:8080/ //只能在本机运行
- Network: http://172.18.1.33:8080/ //ip地址访问,可能通过手机直接访问
2.4 路由懒加载
router/index.js
//import Home from './home.vue'
import Home from './home.vue'
//路由懒加载
const Home=()=>import('./home.vue')
const routes=[
{path:'/home',component:Home}
]
2.5 vuex运行机制
3.Vue后台管理技术选型
3.1 技术栈:Vue,Element UI/iview ui/vant ui ,Axios,Sass,ES6
3.2 B端和C端:
C端:customer,用户端,最终用户使用的,webApp,小程序,App,京东App,淘宝App
B端:business 后台管理-难度在于理解业务流程
3.3 分析一下典型的后台管理系统
- 简单:
https://github.com/bailicangdu/vue2-manage
- 中等:
- 复杂:
https://github.com/PanJiaChen/vue-element-admin
参考文档:https://panjiachen.github.io/vue-element-admin-site/zh/guide/
Mock:随机生成的假数据
3.4 经典的前端工程目录结构
3.4 后台管理启动
技术栈:vue,element ui,axios,sass
安装依赖
- 安装Element UI:
vue add element
? How do you want to import Element? Fully import //全部安装还是按需安装
? Do you wish to overwrite Element's SCSS variables? No //不覆盖sass变量
? Choose the locale you want to load zh-CN //你使用的本地语言:zh-CN 中文
禁用ESlint:
项目根目录下创建vue.config.js module.exports = { lintOnSave:false }
- 清理项目中无用的代码和文件
- Login组件
- 布局问题
- 高度没有撑开
reset.css
html,body {
height:100%;
}
app.vue
#app {
height: 100%;
}
- 重置样式:
https://meyerweb.com/eric/tools/css/reset/
- 添加Element 表单组件
- 给登录表单绑定数据:
第一步:给el-form添加model属性绑定表单数据对象
<el-form :model="loginForm"></el-form>
第二步:在data属性中添加数据对象
export default {
name: "login",
data() {
return {
loginForm:{
username:'张三',
password:'123'
}
}
}
};
第三步: 给具体的表单元素用v-model绑定
<el-form-item>
<el-input v-model="loginForm.username"></el-input>
</el-form-item>
- 用户名和密码的验证规则
第一步:给el-form添加rules属性绑定表单数据对象
<el-form :model="loginForm" :rules="validateRules"></el-form>
第二步:在data属性中添加数据对象
export default {
name: "login",
data() {
return {
//验证表单规则
validateRules: {
username: [
{ required: true, message: "请输入用户名", trigger: "blur" },
{ min: 5, max: 15, message: "长度在 5 到 15 个字符", trigger: "blur" },
],
password: [
{ required: true, message: "请输入密码", trigger: "change" },
{ min: 6, max: 25, message: "密码长度在 6到 25 个字符", trigger: "blur" },
],
},
}
}
};
第三步: 给具体的表单元素用prop属性关联
例如:
<el-form-item prop="username">
<el-input v-model="loginForm.username"></el-input>
</el-form-item>
- 点击登录按钮调接口完成登录
电商后台接口基地址:
1. https://www.liulongbin.top:8888/api/private/v1
2. http://www.ysqorz.top:8888/api/private/v1/ //每天夜里2点会重置为最原始数据