vue2.0+element-ui(01簡單點的單頁面)

• 前言：

在《Vue.js權威指南》剛出版的時候，本身就做爲一名前端粉捧了一把場，但是真是應了那句「出來混，老是要還的「這句話了，那時候信心滿滿的買來書想要認真研究，最終卻仍是把它擱淺了。直到最近工做上要使用它來作一個後臺管理系統，纔不得不逼迫本身再次從新拿起書，看起文檔，努力研究這個異常流行的Vue.js。

• 過程：

簡單頁面呈現以下   （圖片貌似有點模糊，主要也就是實現簡單的增刪改查）：

         

          1.使用到的技術：

   vue2.0：https://cn.vuejs.org/v2/guide/

   element-ui：http://element.eleme.io/#/zh-CN

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

   Axios：https://www.axios.com/

（在Vue1.0中咱們知道和服務端通訊發送請求獲取數據依賴的是vue-resource，但自Vue更新到2.0以後做者就宣告再也不對vue-resource更新，而是改爲了推薦的Axios這一HTTP庫。做用上相似咱們熟知的一些Ajax庫，可是Axios是基於Promise的HTTP請求客戶端，可同時在瀏覽器和Node.js中使用，這好像更符合目前前端的技術新趨勢。或者能夠看這裏：https://mp.weixin.qq.com/s?__biz=MzI0ODcxNDAxNQ==&mid=2247483763&idx=1&sn=2bd49b2a673800fc7726394a3791d973&chksm=e99dc703deea4e153b6442e5f248fd5aad604235b2eda57fdad8ee1e772b81f25a80f216fedb&mpshare=1&scene=23&srcid=0414mg5pg6lSZcGBzn77MVkD#rd）

              mock.js：http://mockjs.com/

（生成隨機數字，攔截ajax請求。）

          2.具體實現過程：

1）新建項目：

    在這裏，使用的編輯器爲Visual Studio Code（vue.js的殷大神推薦的），雖然也是初次使用，不過這幾天感受也挺不錯，推薦你們使用；直接能夠在終端輸入命令行，相似於在cmd中同樣：

//全局安裝 vue-cli

 npm install vue-cli -g# 

//建立一個基於webpack模板的新項目

 vue init webpack my-project

//安裝依賴，快速啓動 my-project爲項目名稱，可自定義

 cd my-project

 npm install

 npm run dev

        至此，在瀏覽器：http://localhost:8080/#/即可看見建好的項目。

      

       

2）安裝所須要的依賴包：

//ui組件

npm install element-ui   

//攔截器

npm install npm install mockjs

//模擬請求

npm install npm install axios

npm install --save axios-mock-adapter

npm install sass-loader

npm install node-sass

PS：

這裏根據項目中的提示，安裝了好多個依賴包，若是有興趣，能夠一一研究，這裏就很少作解釋了。

3）安裝完畢以後執行：npm run build，看項目是否報錯，而後修改一下相應的文件：(完整代碼：請戳這裏)

main.js:

import Vue from 'vue'
import App from './App'
//引入element-ui組件
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import VueRouter from 'vue-router'
import routes from './router/index'
import Mock from './mock'
Mock.bootstrap();





Vue.use(ElementUI);
Vue.use(VueRouter);

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

// 實例化vue
new Vue({
  router,
  // store,//vuex 提供的
  render: h => h(App)
}).$mount('#app')    //手動地掛載一個未掛載的實例(#app)

router/index.js:

/**
 * desc: 路由配置
 */


import table from '../views/nav1/table.vue'

let routes = [
    {
        path: '/',
        component: table,
        name: '',
        iconCls: 'fa fa-id-card-o',
        leaf: true,//只有一個節點
        children: [
            {
                path: '/page1', component: table, name: '導航111'
            }
        ]
    },
    //若均爲匹配，則提示404
    {
        path: '*',
        hidden: true,
        redirect: {
            path: '404'
        }
    }
];

export default routes;

在src中新建一個api/api.js，專門存放模擬的數據接口：

/**
 * author: xxx
 * create: 2017-04-26
 * update: 2017-04-26 by xxx
 * desc:連接後臺接口的js文件(
 * 在Vue1.0中咱們知道和服務端通訊發送請求獲取數據依賴的是vue-resource，
 * 但自Vue更新到2.0以後做者就宣告再也不對vue-resource更新，
 * 而是改爲了推薦的Axios這一HTTP庫。做用上相似咱們熟知的一些Ajax庫,
 * 可是Axios是基於Promise的HTTP請求客戶端，可同時在瀏覽器和Node.js中使用,
 * 這好像更符合目前前端的技術新趨勢
 * )
 */
import axios from 'axios';
//基礎路徑
let base = '';

export const getUserListPage = params => { return axios.get(`${base}/user/listpage`, { params: params }); };

export const removeUser = params => { return axios.get(`${base}/user/remove`, { params: params }); };

export const batchRemoveUser = params => { return axios.get(`${base}/user/batchremove`, { params: params }); };

export const editUser = params => { return axios.get(`${base}/user/edit`, { params: params }); };

export const addUser = params => { return axios.get(`${base}/user/add`, { params: params }); };

一切配置完畢後，就能夠見到心儀的頁面了。

• 後言：

這兩天算是紮根研究vue.js吧，不只更加了解了其使用方法，並且還認識了不少新的知識：好比攔截ajax的axios，還有mock.js，雖然都是略知一二，可是那種成就感依舊清晰在心。還有很是感謝這兩天以來本身所在的vue的各類羣，真的是大神無處不在，並且還很熱心。3ky啦~~~無心之中，還發現CZ大神說「努力作一名全棧開發者」，個人天，如此優秀的人都在努力，那我從此得更加努力了，fighting for technology！