我们选择vue的周边库 vue-cli, vue-router,vue-resource,vuex
1.vue-cli 创建项目
2.vue-router 实现单页路由
3.vuex 管理数据流
4.vue-resource 请求node服务端
5.vue文件 组件化开发
PS:本文node v6.2.2 npm v3.9.5 vue v2.1.0 vue-router v2.0.3 vuex v2.0.0
首先,安装vue-cli。(确保已安装node和npm)
npm i -g vue-cli
然后创建一个webpack项目并且下载依赖
vue init webpack vue-tutorial
cd item
npm install
接着使用 npm run dev 在热加载中运行应用
这一行命令代表着它会去找到package.json的scripts对象,执行node bulid/dev-server.js。在这文件里,配置了Webpack,会让它去编译项目文件,并且运行服务器,我们在localhost:8080即可查看应用。
接着安装路由、XHR请求、数据管理下载等其他库
npm i vue-router vuex vue-resource --save
npm i css-loader node-sass sass-loader vue-style-loader --save
目录结构:
http://router.vuejs.org/zh-cn/ 路由构建单页应用Single Page Applications 用 Vue.js + vue-router 创建单页应用,是非常简单的。使用 Vue.js 时,我们就已经把组件组合成一个应用了,当你要把 vue-router 加进来,只需要配置组件和路由映射,然后告诉 vue-router 在哪里渲染它们。
在main.js
// 0. 安装、注册使用 import VueRouter from 'vue-router' Vue.use(VueRouter) // 1. 定义(路由)组件。 // 可以从其他文件 import 进来 const Foo = { template: ' foo ' } 组件必须有template import ManageSort from './components/ManageSort' import AddItems from './components/AddItems' import ManageOrder from './components/ManageOrder' // 3. 定义路由 const routes = [ { path:'/', component: Home },{ path:'/home', component:Home, children:[ {path:'manageSort',component:ManageSort}, {name:'addCargo',path:'addCargo/:appBorr',component:AddItems}, {name :'manageSort',path:'manageSort/:appBorr',component:ManageSort}, {path:'manageOrder',csomponent:ManageOrder}, {name:"manageOrder", path:'applyOrder/:orderType/:status',component:ManageOrder}, {path:'manageValuable',component:ManageValuable}, {name : "myproducts",path:'viewProducts/:appBorr/:type',component:ViewProducts}, ] },{ path:'/login', component:Login },{ path : '*',component : NotFound} ]; // 3. 创建 router 实例,然后传 `routes` 配置 const router = new VueRouter({routes}); // 4. 创建和挂载根实例。 // 记得要通过 router 配置参数注入路由, // 从而让整个应用都有路由功能 new Vue({ el: '#app', router, template: '', store, // components: { App,Login,Home,NotFound} ...App, }); // 现在,应用已经启动了!在HTML中使用路由:
//使用 router-link 组件来导航. // 默认会被渲染成一个 `` 标签 //通过传入 `to` 属性指定链接. 新增物资 贵重物品 // 路由出口 // 路由匹配到的组件将渲染在这里首先创建store文件夹,内有index.js/action.js/mutation-type.js/mutation.js四个文件
在`index.js`中引入并注册Vuex, import Vue from 'vue' import Vuex from 'vuex' import mutations from './mutations' import actions from './actions' Vue.use(Vuex); const state = { "valuables":[ {"id":1,"name":"百事可乐","amount":1,"price":10,"size":"200ml","remark":"无"}, {"id":2,"name":"项链","amount":1,"price":10000,"size":"1","remark":"珀金"} ] } //在action.js中定义函数对数据流进行操作 [types.ADD_CARGO] (state,cargo) { console.log(cargo.name); }, //在`main.js`中调用store文件夹 `import store from './store'`在.vue组件中调用函数,就可以实现数据流更新
this.$store.dispatch("addCargo",this.newCargo);
使用:
// 基于全局Vue对象使用http Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback); 基于某个Vue实例使用http this.$http.get('/someUrl', [options]).then(successCallback, errorCallback); js遍历数组 array.forEach(function(item,index){ } 删除数组某个元素 js遍历对象 删除对象某个属性