vue概括

1.Vue全家桶

vue.js,vue-router,vuex,axios,ES6,Sass/less/Stylus,…

  1. vue.js:computed,过滤器,自定义指令,绑事件(@事件名),绑属性(:属性名),组件通讯(3种)…

  2. vue-router:路由传参,路由守卫,嵌套路由,动态路由,路由懒加载…

  3. vuex:集中管理组件状态,5个要素:state,mutation,action,modules,getters

  4. axios:数据请求

    1. 官网文档:https://github.com/axios/axios
    2. 中文文档:http://www.axios-js.com/zh-cn/docs/
  5. Sass:https://www.cnblogs.com/chyingp/p/sass-basic.html

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 分析一下典型的后台管理系统

  1. 简单:https://github.com/bailicangdu/vue2-manage

  2. 中等:

  3. 复杂:https://github.com/PanJiaChen/vue-element-admin

    参考文档:https://panjiachen.github.io/vue-element-admin-site/zh/guide/
    

Mock:随机生成的假数据

3.4 经典的前端工程目录结构

在这里插入图片描述

3.4 后台管理启动

  1. 技术栈:vue,element ui,axios,sass
  2. 安装依赖
    1. 安装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
}
  1. 清理项目中无用的代码和文件

  2. Login组件

    1. 布局问题

      1. 高度没有撑开

        reset.css
        html,body {
            height:100%;
        }
        
        app.vue
        #app {
          height: 100%;
        }
        
      2. 重置样式:https://meyerweb.com/eric/tools/css/reset/

    2. 添加Element 表单组件

      在这里插入图片描述

    3. 给登录表单绑定数据:

      第一步:给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>
      
      
    4. 用户名和密码的验证规则

      第一步:给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>
      
    5. 点击登录按钮调接口完成登录

电商后台接口基地址:
   1. https://www.liulongbin.top:8888/api/private/v1
   2. http://www.ysqorz.top:8888/api/private/v1/      //每天夜里2点会重置为最原始数据
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值