一、項目開發為什麼要使用 vue？

（1）vue 的簡介

Vue.js 是一套建構使用者界面的

漸進式架構

，Vue 采用自下向上增量開發的設計，其核心庫隻關注視圖層，

易于上手

。在傳統 web 開發中，我們搭建項目都以 html 結構為基礎，然後通過 jquery 或者 js 來添加各種特效功能，需要去選中每一個元素進行指令，這些内容在簡單的項目中或者不變的項目中還能應付得來，一旦項目改動或者項目工程較大，代碼的修改将是複雜繁瑣的，而這時候用了 vue，這些問題都不複存在。

（2）vue 的優勢有哪些？

1、 資料綁定：vue會根據對應的元素，進行設定元素資料，通過輸入框，以及get擷取資料等多種方式進行資料的實時綁定，進行網頁及應用的資料渲染 。

2、 元件式開發：通過vue的子產品封裝，它可以将一個web開發中設計的各種子產品進行拆分，變成單獨的元件，然後通過資料綁定，調用對應模版元件，同時傳入參數，即可完成對整個項目的開發。

二、如何使用 vue 開發一個背景管理系統？

基于

vue + element-ui

開發，可借用

vue-element-admin

架構搭建的基本結構。

後續有機會的話會寫一寫vue開發背景管理系統的小demo。

三、如何使用 vue 開發一個移動端項目？

（1）安裝腳手架

cnpm i @vue/cli -g 
vue create myapp / vue ui
cnpm i @vue/cli-init -g / cnpm i vue-cli -g
vue init webpack myapp

（2）建立項目

vue create myapp
cd myapp
cnpm run serve

（3）設定項目的基本結構

src

* api
* assets
* components
* lib
* mock
* store
* views
  App.vue
  main.js
  registerServiceWorker.js
  router.js
  store.js

（4）建立頁面基本結構

需要添加樣式庫 scss

App.vue

<div id="app">
    <div class="container">
    <header class="header"></header>
    <div class="content"></div>
    </div>
    <footer class="footer"></footer>
    </div>

（5）建立各個頁面

home kind cart user detail

（6）設定路由

routes: [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'home',
    components: {
      default: () => import('@/views/home/index.vue'),
      footer: Footer
    }
  },
  {
    path: '/kind',
    name: 'kind',
    components: {
      default: () => import('@/views/kind/index.vue'),
      footer: Footer
    }
  },
  {
    path: '/cart',
    name: 'cart',
    components: {
      default: () => import('@/views/cart/index.vue'),
      footer: Footer
    }
  },
  {
    path: '/user',
    name: 'user',
    components: {
      default: () => import('@/views/user/index.vue'),
      footer: Footer
    }
  }
]

App.vue

<template>
  <div id="app">
    <router-view></router-view>
    <router-view name="footer"></router-view>
  </div>
</template>

components/Footer.vue

<template>
  <footer class="footer">
    <ul>
      <router-link to="/home" tag="li">
        <span class = "iconfont icon-shouye"></span>
        <p>首頁</p>
      </router-link>
      <router-link to="/kind" tag="li">
        <span class = "iconfont icon-tubiao113"></span>
        <p>分類</p>
      </router-link>
      <router-link to="/cart" tag="li">
        <span class = "iconfont icon-gouwuche"></span>
        <p>購物車</p>
      </router-link>
      <router-link to="/user" tag="li">
        <span class = "iconfont icon-weibiaoti2fuzhi12"></span>
        <p>我的</p>
      </router-link>
    </ul>
  </footer>
</template>

到此，基本的架構已經搭好了，各個頁面的跳轉就已經可以實作了，剩下的就是往各個頁面添加元素了。後續有時間會繼續完善，繼續更新

vue項目搭建一、項目開發為什麼要使用 vue？二、如何使用 vue 開發一個背景管理系統？三、如何使用 vue 開發一個移動端項目？