vue vuex vue-router vue-resource 简单的搭建一个 vue 小项目

在开始之前，默认你已经对vue的基础知识有了一定的了解了

这里的开发使用的是es6写的，如果你还未掌握es6的相关知识，那么你----需要抓紧学了，可以戳这里来学。es2015，es2016……

先贴一波文档：

       vue中文网：http://cn.vuejs.org/

       vuex中文网：http://vuex.vuejs.org/zh-cn/

       vue-resource：https://github.com/pagekit/vue-resource/blob/master/docs/http.md

       vue-router2：http://router.vuejs.org/zh-cn/

        如果看别的东西嫌烦，直接看文档，vue的中文文档相当滴好了

使用vue-cli直接生成项目的基础结构，这里使用webpack来进行模板化，自动化：

   

 $  npm install -g webpack     //全局安装webpack
 $  npm isntall -g vue-cli    // 全局安装vue-cli
 $  vue init webpack  vue-project   //生成一个以webpack构建的项目 vue-preject
 $  cd  vue-project
 $  npm install
 $  npm run dev     //运行项目

 生成的目录如下：

         

这里首先安装 webpack 以及vue-cli，然后生成一个名为vue-project的项目，进入到项目中，安装依赖，最后运行，在浏览器中打开http://localhost:8080 即可。

因为要使用  vuex  vue-router  vue-resource  这三个东西，所以先安装一下：

 $ npm install --save  vuex vue-router vue-resource

在src文件下建一个routes.js文件 用于设置路径，使用方式如下：

 import Vue from 'vue'
 import VueRouter from 'vue-router'

 import Header from './components/header.vue'
 import Home from './components/home.vue'
 import Footer from './components/footer.vue'
 import Content from './components/content.vue'
 import Charts from './components/charts.vue'
 import Details from './components/details.vue'

 Vue.use(VueRouter)

 const routes = [
   {path: '/home', component: Content, name:'content',
    children: [
         {
           path: 'footer',
           component: Footer
         }
       ]
   },
   {path: '/details/:id', component: Details, name: 'details'},
   {path: '/charts', component: Charts, name:'charts'},
   {path: '*', component: Content, name:'home'}
 ]

 const router = new VueRouter({
   mode: 'history',
   routes
 })

 export default router

在src下的components文件中建立charts.vue、content.vue、details.vue、footer.vue、header.vue、home.vue等vue文件

在src下建立store文件夹，并在该文件夹下建立actions.js、index.js、mutations.js等文件，用于放置vuex内容，index.js用于整合state、actions、nutations、getters等内容。

 //index.js
 import Vue from 'vue'
 import Vuex from 'vuex'
 import actions from './actions.js'
 import mutations from './mutations.js'
 import lists from './modules/lists.js'

 Vue.use(Vuex)

 const store = new Vuex.Store({
   state: {
     count: 0
   },
   mutations,
   actions,
   getters: {

   },
   modules: {
     lists
   }
 })

 export default { store }

 //mutations.js
 const mutations = {
   increment (state) {
     state.count++
   }
 }

 export default mutations

在加一些css样式，最后的运行结果如下：

整个目录的结构如下：

本地开发的时候获取数据时会出现跨域的问题，这里可以配置config文件夹下的proxyTable 属性，详情可以 查看这里

例子下载地址   https://github.com/yxcs/vue-test