参考资料:
(1/2)Vue构建单页应用最佳实战
Build a Single Page Time Tracking App with Vue.js, Part II
vue.js是一个只关注于UI的前端框架,MVVM中的ViewModel,进行双向数据绑定. 与react不同的是,Vue.js操作的是实际的dom,而react操作的是VirtualDom. Vue.js也吸收了Angular.js中的许多优秀的设计,如指令等.
- 模板template 嵌入了vue标签的一堆html(html片段)
- 组件component 包含了template,script,style的对象
- Vue.js应用通常都从一个根实例开始
这个Vue根实例,可以通过js语法:
也可以,通过引用一个
var vm = new Vue({ // 选项 })
App.vue
,这个App.vue文件中通常包含了template,script等// 引入组件 import App from './App'
今天五一假第一天,文档什么的实在看不下去啊怎么办...
这里使用vue-resource来进行服务端通信.
后台采用express,数据存储使用mongodb.
使用vue-resource进行服务端通信,对于不同域的服务端接口地址,需要服务端配置允许跨域访问源域名:
// 允许跨域请求
app.all("*", function (req, res, next) {
res.header("Access-Control-Allow-Origin", '*'); // 允许任何源地址的请求
res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With');
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
if (req.method == 'OPTIONS') {
res.send(200);
} else {
next();
}
});
A Vue.js project
front-end
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# run unit tests
npm run unit
# run e2e tests
npm run e2e
# run all tests
npm test
Server
# run node server
npm run server
For detailed explanation on how things work, checkout the guide and docs for vue-loader.