從零開始建立一個vue項目

1、首先建立一個文件夾，在終端中輸入

1 vue create myapp

選擇默認defaule，等待項目的生成，項目生成後鍵入一下命令

 1 //進入項目
 2 
 3 cd myapp
 4 
 5 //啓動項目
 6 
 7 npm run serve
 8 
 9 //或者
10 yarn serve

刪除沒必要要的文件，梳理一下須要安裝那些依賴和插件 

1.axios 用來代替ajax發起請求

2.iscroll 一個經常使用的滾動插件

3.node-sass sass-loader 用來編寫sass

4.swiper 輪播圖插件

5.vue-router 路由插件

6.vue-cookies vue項目中便捷的cookie

使用命令安裝這些插件

1 cnpm i axios iscroll node-sass sass-loader swiper vue-router vue-cookies -D

安裝完成後引入vue

在src下建立axios.js文件，寫入

import axios from 'axios'   //引入axios
import vue from 'vue'
vue.prototype.$axios = axios;   //添加原型


//在main.js中寫入
import './axios.js'

建立cookies.js文件，寫入

1 import vue from 'vue'
2 import cookie from 'vue-cookie'
3 vue.use(cookie)
4 
5 //在main.js中寫入
6 import './cookies.js'

若是還須要eventbus能夠建立eventbus.js

1 import Vue from 'vue'
2 
3 var eventbus = new Vue()
4 
5 vue.prototype.$eventbus = eventbus

//在main.js中引入
import './eventbus'

也能夠不是有模塊化開發，直接在main.js中引入

 1 //axios
 2 import axios from 'axios'   //引入axios
 3 Vue.prototype.$axios = axios;   //添加原型
 4 
 5 
 6 //cookie
 7 import cookie from 'vue-cookie'
 8 Vue.use(cookie)
 9 
10 //eventbus
11 var eventbus = new Vue()
12 
13 Vue.prototype.$eventbus = eventbus

 

接下來就是router路由文件，建立router.js，寫入

 1 import vue from 'vue';
 2 import vueRouter from 'vue-router';
 3 
 4 //將頁面導入路由
 5 import index from './components/index.vue';
 6 
 7 vue.use(vueRouter);
 8 //設置路由規則
 9 const routes = [
10     {
11         path='/',
12        component : index
13     }  
14 ]
15 
16 //mode 網址顯示的樣式  history默認 hash網址含# abstract 網址不變
17 const router = new vueRouter({routes,mode:'history'})
18 
19 export defualt  router   //導出
20 
21 
22 //在main.js中引入
23 import router from './router.js';
24 new Vue({
25    router,
26    ....
27 }).$mount('#app')

assets文件夾，公共樣式、js、圖片等，須要在main.js中引入

1 //好比
2 import './assets/css/reset.css';

components文件用來存放組件

router在頁面的顯示分爲入口和出口

入口是點擊某個元素進行跳轉，出口是在哪裏顯示

1 //入口
2 
3 <router-link to='/'>點我跳轉</router-link>
4 
5 //出口
6 
7 <router-view></router-view>

當咱們要使用vuex時，先使用命令進行安裝

1 cnpm i vuex -S

在src下建立store.js

 1 import vue from 'vue';
 2 import vuex from 'vuex';
 3 
 4 //若是使用模塊化
 5 import goods from './goods.js'
 6 
 7 vue.use(vuex);
 8 
 9 const store = new vuex.Store({
10      modules:{
11            g:goods     //將邏輯代碼寫入goods.js文件中 12     }
13 })
14 
15 export default store;
16 
17 //在main.js中引入
18 import store from './store.js'
19 
20 new Vue({
21    store,
22    router,
23    ......
24 }).$mount('#app')

用來存放store代碼的goods.js

 const goods = {
     //  用來存放數據
      state:{
           a : 1
       },
     //用來直接修改state數據
      mutations:{
         add(state,payload){
            state.a = payload
         }
      },
     //用來編寫邏輯
      actions:{
         //payload表明傳過來的數據，context
          add(context,payload){
             context.commit('add',1)
         }
      },
       //計算屬性，具備緩存的特色
      getter:{
         
      }
}

 而後在頁面中調用actions控制mutation進行修改state

1 created(){
2     //獲取state數據
3     this.arr = this.$store.state.goods;
4     //調用action
5     this.$store.dispatch('add',this.arr);
6     //也能夠直接控制mutation
7      this.$store.commit('add',this.arr);
8 }

 

vuex提供了幾個輔助函數

mapState在vue組件中用於快速接受state的數據

mapMutations在vue組件中用於快速接收mutations中的數據

mapActions在vue組件中用於快速接收actions中的數據

mapGetters在vue組件中用於快速接收grtters中的數據

//在頁面中引入

 import {mapActions,mapMutations,mapGetters,mapState} from 'vuex'

computed:

{
  ...mapState({
     goods:(state)=>{
         return state.goods;
     } 
  })
  ...mapActions(['add'])     //和視圖層的函數名要一致
  ...mapMutations(['add'])
  ...mapGetters(['add'])
}