vue技术入门篇

1.目录结构

build:webpack构建命令目录,包括运行开发环境,项目打包等配置

config:webpack和node基础,开发,线上环境的配置

dist:webpack打包后生成的静态文件目录

node_modules:项目依赖的js包

src:项目根目录

----assets:静态资源目录,这里的资源会被webpack构建

----base:vue项目基础组件目录

--------api:项目

--------componets:组件(通用页面)所有模块使用

--------router:路由,请求url-->页面

----common:工具类

----mock:前端工程用来做单元测试,模拟写的用例

----module:模块

--------modulename:模块名称

------------api:模块下的js文件,定义方法,请求服务端接口

------------components:单独模块下的组件

------------page:存放页面信息

------------router:路由

--------home:主页

----statics:静态资源

----vuex:基本状态管理工具

  package.json:npm包配置文件,里面定义了项目的npm脚本,依赖包等信息

2.页面.vue

<template>
    <!-- 编写页面静态部分,即view部分-->
</template>

<script>
    /* 编写页面静态部分,即model及vm部分 */
</script>

<style>
    /*编写页面样式,不是必须的*/
</style>

3.路由(访问url)

index.js

import 别名 from ‘@(表示src目录)/。。。。‘

。。。

浏览器发送http请求

Vue.js根据路由找到page_list页面

执行page_list.vue中的钩子方法

钩子方法执行page_list.vue中的query方法

调用执行cms.js中的page_list方法

解决跨域有node.js转发到服务器

服务器返回到then(res)中

vue的钩子方法:created():vue实例创建好还未渲染时执行;

        mounted():vue渲染完成后执行;

api中方法:

//我的课程列表
export const findCourseList = (page,size,params) => {
//使用工具类将json对象转成key/value
  let queries = querystring.stringify(params)
  return http.requestQuickGet(apiUrl+"/course/coursebase/list/"+page+"/"+size+"?"+queries)
}

method:

//获取课程列表
      getCourse() {
        courseApi.findCourseList(this.page,this.size,{}).then((res) => {
          console.log(res);
          if(res.success){
            this.total = res.queryResult.total;
            this.courses = res.queryResult.list;
          }
        });
      },

钩子方法

mounted() {
      //查询我的课程
      this.getCourse();
    }

返回的数据绑定

data() {
      return {
        page:1,
        size:7,
        total: 0,
        courses: [], //我的课程列表
        sels: [],//列表选中列
        imgUrl:sysConfig.imgUrl
      }
    },