準備階段

1. 安裝nodejs、npm
2. 全局安裝vue、vue-cli
3. 全局安裝webpack
4. 在合適的位置建一個項目文件夾

開始

打開你的Terminal（MAC）或者cmd（windows）
一路cd到你的項目文件夾
通過vue-cli腳手架搭建項目：vue init webpack xxx xxx為你的項目名
設(shè)置項目名、描述、作者、是否使用vue-router（使用）、是否使用ESLint（雖然很有用但是我不喜歡用哈哈）、單元測試（不需要）、e2e （NO）、使用npm...反正就是一路回車，看自己需求搭建。

項目初始化

npm start

好了 項目初始化搞定??
打開你的瀏覽器輸入http://localhost:8080就可以看到Vue的界面了

簡單設(shè)計項目架構(gòu)

項目有一個設(shè)計合理的架構(gòu)是非常重要的，不同的文件不同的代碼做著不同的工作，我們現(xiàn)在要給他們劃分開，一人一個坑??
新建幾個文件夾讓你的自動生成的項目目錄長成這樣 /* ?? */

項目目錄結(jié)構(gòu)

utils工具類

在這里我們定義一些開發(fā)時會用到的工具類，例如封裝axios、時間格式化工具、封裝本地存儲等

屏幕快照 2019-07-13 下午3.13.28.png

例子：http.js 簡單封裝axios
baseURL就是你要訪問的地址的ip和端口號

import axios from 'axios'

let httpInstance = axios.create()

// httpInstance.defaults.baseURL = 'http://172.20.10.2:3001'//iphone熱點
// httpInstance.defaults.baseURL = 'http://172.30.10.127:3001' //公司ip
//httpInstance.defaults.baseURL = 'http://39.97.114.146:3001' //服務器地址
// httpInstance.defaults.baseURL = 'http://192.168.1.109:3001' //軟件園5號樓宿舍
httpInstance.defaults.baseURL = 'https://api.apiopen.top/' //發(fā)放接口


httpInstance.defaults.timeout = 5000

//POST 請求
httpInstance.formurl = (url, data, config) => {
  return httpInstance.post(url, data, {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    ...config
  })
};

//  request攔截器
httpInstance.interceptors.request.use(
  config => {
    //這里寫攔截后你需要的操作
    //例如：
    // if (store.getters.token) {
    //   config.headers['Authoriztion'] = store.getters.token; //讓每個請求都攜帶token
    // }
    // config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
    return config
  },
  error => {
    console.log('err' + error) //only for debug ～～～
    return Promise.reject(error)
  }
)
//  reponse攔截器
httpInstance.interceptors.response.use(
  response => {
    if (response.status === 200) {
      return Promise.resolve(response)
    }
  },
  error => {
    return Promise.reject(error)
  }
)
export default httpInstance

api.js 接入后端服務的api管理

對所有訪問后端的接口進行統(tǒng)一管理可以使復雜的系統(tǒng)變得有條理，可以使開發(fā)時候思路更清晰，也方便管理維護，我們建一個api文件夾，不同類別的接口各自定義在自己的模塊中，那里出錯就去哪里找問題。

api管理

例子：userApi.js

import HttpUtils from '../utils/http'

const UserApi = {
  userLogin: (params) => {
    let url = '/login';
    return HttpUtils.post(url, params)
  },
  userRegist: (params) => {
    let url = '/regist';
    return HttpUtils.post(url, params)
  }
}

export default UserApi;

在業(yè)務界面調(diào)用接口時直接使用定義好的接口就ok啦?? /* ?? */

import UserApi from "../api/userApi";

UserApi.userLogin({ account: 666 , password: 'wozhende666' })
  .then(res => {
     console.log(res);
   })
  .catch(err => {
     console.log(err);
   });

這樣最終訪問的地址就是http.js中的baseURL+userApi.js中定義的接口:
https://api.apiopen.top/login 也就是后端接口放的地方，把公共部分提取出來為baseURL，不同的接口在api管理中來區(qū)分??

項目路由router

由 前端 來控制頁面的跳轉(zhuǎn)（但其實是個單頁面），根據(jù)不同的 url 地址展示不同的內(nèi)容和頁面。
優(yōu)點：體驗好，不需要每次從服務器獲取全部，快速展現(xiàn)給用戶；
缺點：不利于SEO；使用瀏覽器的前進，后退鍵的時候會重新發(fā)送請求，沒有合理的利用緩存；單頁面無法記住之前滾動的位置，無法在前進和后退的時候記住滾動的位置。

路由的結(jié)構(gòu)設(shè)計可以按自己的項目頁面結(jié)構(gòu)情況來設(shè)計
我一般的習慣是將頭部，底部等公共的部分抽離出來放到外層，各個業(yè)務界面定義為子路由
舉個?? /* ?? */

import Vue from 'vue'
import Router from 'vue-router'
import Home from "../views/home";
import Index from '../views/index'
import FirstPage from '../views/firstpage/firstpage.vue'
Vue.use(Router)

export default new Router({
  routes: [{
    path: '/',
    name: 'home',
    component: Home,
    redirect: '/index', //配置默認子路由為index
    children: [{
      path: '/index',
      name: 'index',
      component: Index,
    }, {
      path: '/firstpage',
      name: 'firstpage',
      component: FirstPage,
    }]
  }]
})

頁面結(jié)構(gòu)

view下有個 home.vue是入口頁面，頁面的頭部和底部抽離出來在這里使用，在頭部和底部之間又定義了一層二級路由（在router.js中配置了children）index.vue是首頁，其他頁面文件按功能不同進行分類，在定義路由的時候要弄清楚層級關(guān)系
home.vue代碼如下：

<template>
  <div>
    <top-header></top-header>
    <router-view></router-view>
    <top-footer></top-footer>
  </div>
</template>

<script>
import TopHeader from "../components/layout/top_header";
import TopFooter from "../components/layout/top_footer";
export default {
  name: "",
  components: { TopHeader, TopFooter },
  data() {
    return {};
  }
};
</script>

<style scoped>
</style>

效果如下

如圖地址改變只是改變了中間需要改變的部分，頭部和底部不用重新渲染，同時在寫代碼的時候也不需要每次都寫那些代碼，方便多了不是嗎？

狀態(tài)管理

由于前端技術(shù)爆發(fā)式發(fā)展，SPA、組件化、模塊化等概念被炒的飛起，項目中各個模塊如果需要共同狀態(tài)或者說數(shù)據(jù)的話，就需要組件間通訊，但是如果業(yè)務結(jié)構(gòu)一層套一層，數(shù)據(jù)狀態(tài)在父、子、孫、曾孫... 之間傳遞的時候很容易就亂了，于是在項目比較大的時候，出于對項目架構(gòu)的靈活性考慮就要使用狀態(tài)管理。
常見的狀態(tài)管理技術(shù)：mobx Vuex Reduex

簡單來說說vuex

在store文件夾下新建store.js
store.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

export default new Vuex.Store({
  name: 'store',
  state: {
    //定義要進行狀態(tài)管理的數(shù)據(jù)
    count: 0
  },
  //改變state的屬性的值的方法放在mutations里
  mutations: {
    increment(state) {
      state.count += 1
    },
    decrement(state) {
      state.count -= 1
    }
  }
})

在main.js中將store掛載到全局下每一個組件上

import store from './store/store'
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

當你需要使用store中的某一數(shù)據(jù)時，你可以這樣：
{{$store.state.count}}對沒錯，就是直接用哈哈
這里要記住一定不要忘了$，我就老忘???♂?
當要改變數(shù)據(jù)的狀態(tài)時，要把改變數(shù)據(jù)的邏輯寫在store.js的 mutaiins 中?? 請看上上個圖
使用時是這樣??
index.vue

<template>
  <div>
    <button @click="$store.commit('increment')">+</button>    
    <button @click="$store.commit('decrement')">-</button>
    <button @click="change">change</button>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    return {};
  },
  created() {},
  methods: {
    change() {
      this.$store.commit({
        type: "decrement",
        amount: 10
      });
    }
  }
};
</script>

<style scoped>
</style>

直接在行內(nèi)調(diào)用?；蛘呦竦谌齻€按鈕一樣綁定事件都可以。

??因為我太懶了，狀態(tài)管理還有許多更方便有趣的內(nèi)容，這里只是提了冰山一角，最最最基礎(chǔ)的使用
??這篇文章最初開始寫的目的只是因為每次建項目總是覺得不完美，這里那里差點東西的樣子，擼個文鞏固一下，并且也規(guī)范一下自己建一個合理、邏輯清晰的目錄結(jié)構(gòu)
??關(guān)于架構(gòu)部分，本人還是個前端小學生，在這里根據(jù)自己對項目結(jié)構(gòu)的理解，覺得哪些技術(shù)在工程中需要就設(shè)計了哪些，如果又不合理或者有錯誤的地方還請指正！
??如果覺得哪里還需要完善歡迎留言！
??本篇還會繼續(xù)修正、更新。
??求點贊、分享。轉(zhuǎn)發(fā)請備注作者出處
志同道合的小伙伴可以加微信:tong961790??