Vue.js
使用Npm管理依赖，使用webpack打包工具对vue.js应用打包。使用 vue.js官方提供的CLI脚本架很方便去创建vue.js工程雏形。
1.基本语法
v-model:在表单控件或者组件上创建双向绑定.例: input\select\textarea\components（Vue中的组件）：
v-text:解决插值表达式闪烁问题
v-on:绑定一个按钮的单击事件.例:v‐on:click="aaa"
v-bind:以将数据对象绑定在dom的任意属性中.例:<img v‐bind:src="imageSrc">,缩写形式:<img :src="imageSrc">
v‐if:<div v-if=""></div><div v‐else=""></div>
v‐for:遍历<li v‐for="(item,index) in list" :key="index">{{index}}--{{item}}</v-for>
<li v‐for ="(value,key) in 对象">{{key}}‐{{value}}</li>
<li v‐for="(item,index) in 对象list" :key="item.对象.属性">{{index}}‐{{item.对象.属性a}}‐{{item.对象.属性b}}</li>
created:Vue实例已创建但是DOM元素还没有渲染生成
mounted:DOM元素渲染生成完成后调用
2.PC-Vue框架
(1)package.json记录了工程所有依赖，及脚本命令：
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"unit": "jest --config test/unit/jest.conf.js --coverage",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
"build": "node build/build.js"
},
开发使用：npm run dev
打包使用：npm run build
(2)build/webpack.base.conf.js
webpack.base.conf.js就是webpack的webpack.config.js配置文件，在此文件中配置了入口文件及各种Loader。
webpack 是通过vue-load解析.vue文件，通过css-load打包css文件等。
(3)src/main.js
main.js是工程的入口文件，在此文件中加载了很多第三方组件，如：Element-UI、Base64、VueRouter等。创建Vue实例
(4)index.html是模板文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>dys-actors-sysmanage</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
(4)src/module/xxx/page/xxx.vue
<template>
<div>
<el‐table :data="tableData" stripe style="width: 100%">
<el‐table‐column prop="name" label="姓名" width="180"> </el‐table‐column>
<el‐table‐column prop="address" label="籍贯"> </el‐table‐column>
<el‐table‐column prop="date" label="日期" width="180"> </el‐table‐column>
</el‐table>
<el‐pagination layout="prev, pager, next" :page‐size="params.size" style="float:right;"
v‐on:current‐change="changePage" :total="total" :current‐page="params.page" >
</el‐pagination>
<el‐button type="primary" v‐on:click="query" size="small">查询</el‐button>
</div>
</template>
<script>
import * as xxxApi from '../api/xxx'//导入module/xxx/api/xxx.js
export default {
data() {
return {
list: [],
total: 0,
params: {
page: 1,//页码
size: 10 //每页显示个数
}
}
},
methods: {
changePage: function () {
this.param.page = page
this.query()
},
query: function () {
xxxApi.page_list(this.params.page,this.params.size,this.params).then((res)=>{
this.total = res.queryResult.total
this.list = res.queryResult.list
})
}
},
mounted(){
this.query()
}
}
</script>
<style>
/*css样式*/
</style>
(5)module/xxx/router/index.js
import Home from '@/module/home/page/home.vue';
import page_list from '@/module/xxx/page/page_list.vue';
export default [{
path: '/',
component: Home,
name: '德云社演员列表',
hidden: false,
children:[
{path:'/xxx/page/list',name:'页面列表',component: page_list,hidden:false}
]
}
]
(6)base/router/index.js
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
// 定义路由配置
let routes = []
let concat = (router) => {
routes = routes.concat(router)
}
// // 导入路由规则
import HomeRouter from '@/module/home/router'
import XxxRouter from '@/module/xxx/router'
// 合并路由规则
concat(HomeRouter)//加入home模块的路由
concat(XxxRouter)//加入xxx模块的路由
export default routes;
(7)module/xxx/api/xxx.js
此方法实现http请求服务端页面查询接口.public是对axios的工具类封装，定义了http请求方法
import http from './../../../base/api/public'
import querystring from 'querystring'
let sysConfig = require('@/../config/sysConfig')
let apiUrl = sysConfig.ApiUrlPre;
export const page_list = (page,size,params) =>{
return http.requestQuickGet(apiUrl+'/xxx/page/list/'+page+'/'+size);
}
axios实现了http方法的封装，vue.js官方不再继续维护vue-resource,推荐使用 axios。
(8)config/sysConfig.js
var sysConfig = {
ApiUrlPre: '/api',
ApiUrl: 'http://api.deyunshe.com/',
imgUrl:'http://img.deyunshe.com/',
videoUrl:'http://video.deyunshe.com/',
openAuthenticate:true,
openAuthorize:true
}
module.exports = sysConfig
(9)proxyTable解决跨域问题
config/index.js下配置proxyTable。以/api/xxx开头的请求，代理请求http://localhost:31001
'/api/xxx': {
target: 'http://localhost:31001',
pathRewrite: {
'^/api': ''
}
Element-UI官方站点：http://element.eleme.io/#/zh-CN/component/installation
浙公网安备 33010602011771号