Ajax,前后端分离开发,前端工程化,Element,Vue路由,打包部署

  1. Ajax介绍
    1. Ajax,前后端分离开发,前端工程化,Element,Vue路由,打包部署_第1张图片
    2. Ajax,前后端分离开发,前端工程化,Element,Vue路由,打包部署_第2张图片
    3. Ajax,前后端分离开发,前端工程化,Element,Vue路由,打包部署_第3张图片
  2. Axios
    1. Ajax,前后端分离开发,前端工程化,Element,Vue路由,打包部署_第4张图片
    2. Ajax,前后端分离开发,前端工程化,Element,Vue路由,打包部署_第5张图片
    3. 
      
      
          
          
          
          Ajax-Axios
          
      
      
          
          
      
          
      
      
      
      
    4. 案例Ajax,前后端分离开发,前端工程化,Element,Vue路由,打包部署_第6张图片

      
      
      
          
          
          
          Ajax-Axios-案例
          
          
      
      
          
      编号 姓名 图像 性别 职位 入职日期 最后操作时间
      {{index + 1}} {{emp.name}} {{emp.job}} {{emp.entrydate}} {{emp.updatetime}}

  3. 前后端分离
    1. Ajax,前后端分离开发,前端工程化,Element,Vue路由,打包部署_第7张图片
    2. Ajax,前后端分离开发,前端工程化,Element,Vue路由,打包部署_第8张图片
  4. 前端工程化
    1. 环境准备,nodejs安装,D:\javaproject\javaweb\day03-Vue-Element\day03-Vue-Element\资料\NodeJS安装文档Ajax,前后端分离开发,前端工程化,Element,Vue路由,打包部署_第9张图片
    2. Vue项目简介
      1. Ajax,前后端分离开发,前端工程化,Element,Vue路由,打包部署_第10张图片Ajax,前后端分离开发,前端工程化,Element,Vue路由,打包部署_第11张图片
      2. Ajax,前后端分离开发,前端工程化,Element,Vue路由,打包部署_第12张图片
      3. Ajax,前后端分离开发,前端工程化,Element,Vue路由,打包部署_第13张图片
      4. 它本来默认端口号是8080 ,但这就和tomcat冲突了所以修改为7000
    3. Vue项目开发流程
      1. Ajax,前后端分离开发,前端工程化,Element,Vue路由,打包部署_第14张图片
      2. Ajax,前后端分离开发,前端工程化,Element,Vue路由,打包部署_第15张图片
  5. Vue组件库Element
    1. Ajax,前后端分离开发,前端工程化,Element,Vue路由,打包部署_第16张图片
    2. Ajax,前后端分离开发,前端工程化,Element,Vue路由,打包部署_第17张图片
    3. pagination分页组件,table表格组件,Dialog对话框组件,Form表单组件等。查看官网
    4. vue页面生成步骤,
      1. 因为在main.js这个入口文件中引用的是APP.vue这个根组件
      2. App.vue这个根组件引用的是 这个组件。
      3. 下面就是element
    5. 
      
      
      
      
      

      一些重要组件的使用Ajax,前后端分离开发,前端工程化,Element,Vue路由,打包部署_第18张图片

  6. Vue路由Ajax,前后端分离开发,前端工程化,Element,Vue路由,打包部署_第19张图片

    1. router,配置路由Ajax,前后端分离开发,前端工程化,Element,Vue路由,打包部署_第20张图片
    2. 什么位置点击跳转Ajax,前后端分离开发,前端工程化,Element,Vue路由,打包部署_第21张图片
    3. App.vue配置Ajax,前后端分离开发,前端工程化,Element,Vue路由,打包部署_第22张图片
  7. 打包部署
    1. 打包,npm run build后会出现一个dist目录
    2. netstat -ano | findStr 80(寻找那个进程占用了80端口pid),如果发现那个进程是系统进程,那我们就把Nginx端口号改了,在conf配置文件中的nginx.conf文件中将listen 改成90。Ajax,前后端分离开发,前端工程化,Element,Vue路由,打包部署_第23张图片
    3. Ajax,前后端分离开发,前端工程化,Element,Vue路由,打包部署_第24张图片
    4. Ajax,前后端分离开发,前端工程化,Element,Vue路由,打包部署_第25张图片

     

     

     

你可能感兴趣的:(vue.js,前端,javascript)