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 } },