简单整理vuejs文件学习

1.项目骨架开发

一项目目录制作
/src
/common 主文件资源
/fonts
/js
/stylus 是一个css编译器 语法中是没有{} 与 ； 的
将下载 图标字体 的css 放进这个文件夹 将css文件后缀改为 .styl 并将原本css文件中的{} 与 ； 去掉 保存

/components
/header 主要存放组件资源
Header.vue

二、mock数据（模拟后台数据）制作

/bulid/dev-server.js

var app = express ()
//一、导入data.json
var appData = require(’…/data.json’);
//把data.json中的数据放在定义的变量中 （方便读取）；
var seller = appData.seller;
var goods = appDara.goods;
var ratings = appData.ratings;

//二、编写路由
//定义路由api
var apiRoutes = express.Router();
//拿到apiRoutes 之后定义一些接口
//get后面第一个是json定义的属性名 function参数里面的第一个是request请求 第二个是response 响应
apiRoutes.get(’/seller’,function(req,res){
//服务端收到请求以后 需要读给客户端一个json类型的数据
res.json({
errno:0,
data:seller
})
});
apiRoutes.get(’/goods’,function(req,res){
res.json({
errno:0,
data:goods
});
});
apiRoutes.get(’/ratings’,function(req,res){
res.json({
errno:0,
data:ratings
});
});

//三、在express中去使用它 利用app.use方法 use有两个参数path
app.use(’./api’,apiRoutes);

//四 检测router是否成功
http://localhost:8080/api/seller
http://localhost:8080/api/goods
http://localhost:8080/api/ratings

当浏览器中的返回json字符串代表mok成功

2 书写min.js
/* eslint-disable no-new */

Postcss 插件 搞定css兼容问题

Vue-router学习
1.在package.json dependences中配置 “vue-router”: “^0.7.13”,
2.npm install 安装
3.在main.js 头部中引入vue-router
import VueRouter from ‘vue-router’;

import Vue from ‘vue’;
import VueRouter from ‘vue-router’;
import App from ‘./App’;

Vue.config.productionTip = false;

/* eslint-disable no-new */
/new Vue({
el: ‘#app’,
template: ‘’,
// 注册了app文件
components: { App }
});/
let app = Vue.extend(App);
let router = new VueRouter();

Resource 使用
1.在package.json 的dependences 中配置
“vue-resource”: “^1.0.1”
2.配置依赖的包 cmd中 npm install
3.在main.js中导入resource模块
import Resource from ‘vue-resource’;
Vue.use(Resource);
4.App.vue中
data() {
return {
seller: {}
};
},
created() {
this.$http.get(’/api/seller’).then((response) => {
response = response.body;
if (response.errno === ERR_OK) {
this.seller = response.data;
console.log(this.seller);
}
});
},

5.在 header组件中渲染
绑定seller
在header。Vue中 使用pros接收传过来的seller