Vue.js+Element-UI從0到部署:基礎篇（2.相關依賴注入）

上一節中咱們介紹到如何搭建一個簡易項目 Vue.js 2.0 + Element UI 從0到部署 實踐教程（1.搭建前準備） 本節將給你們介紹項目目錄和 相關依賴的配置（如下配置適用於，簡單練手的一個項目搭建，真正實際中的項目搭建更爲複雜，在之後的文章中我會介紹）

項目目錄分析

1.用編輯器打開項目目錄

安裝依賴

cnpm i element-ui -S     
cnpm i axios -S                     // 安裝axios  （基於promise的http請求插件）
cnpm i vuex -S         
cnpm install stylus --save-dev            // 使用  stylus ccs與處理器 (sass,less同理)
cnpm install stylus-loader --save-dev     // webpack 去解析打包 stylus  
複製代碼

依賴安裝完成以後，從新 npm run build 運行項目。（這個時候有些初學的鞋同會發現，項目啓動不了了，報錯以下）

緣由是你的服務沒有關閉，致使端口被佔用，沒法啓動，打開任務管理器關閉對應的node進程便可

創建項目文件目錄

將原來目錄下的 hello.vue文件刪除 和app.vue文件內logo刪除再進行以下操做( 刪除以後須要修改router/index.js文件的配置，由於刪除了組件找不到hello.vue) 項目模塊能夠根據你的項目須要，後期在添加也可，以下：可供哦各位參考

在main.js裏面注入相關依賴

import Vue from 'vue'
import App from './App'

// vue-ruoter
import router from './router'   // 路由配置文件

// ElementUI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-default/index.css';   // 使用默認主題 （須要切換主題請參考官方文檔）
Vue.use(ElementUI);


// axios 
import config from './config/httpRequestConfig'     // 請求資源路徑配置 $Ajax 具體請看 此路徑文件

// Vuex
import store from './store';

Vue.config.productionTip = false

/* eslint-disable no-new */  
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})
複製代碼

./config/httpRequestConfig 文件配置以下： 由於項目可能須要，請求攔截器已經，各類開發環境地址端口的配置因此單獨拿出來進行配置，後期會詳細介紹，當前爲簡單的引入

import axios from 'axios';                          //引入axios請求異步資源
Vue.prototype.$Ajax = axios;
複製代碼

這裏說明一下也可經過 fetch 返回 axios 對象來封裝，之後文檔會進行說明，簡單項目經過掛在原型鏈上便可

作了這麼多打開頁面一看仍是空白，是否是有點小失望呢，不要着急，接下來咱們就創建幾個簡單的頁面，來看看效果

創建頁面

以前提到，咱們的頁面都放在 /src/components 目錄之下，可是接下來如何作模塊區分呢，本人經驗也不足，本身琢磨的頁面去模塊區分，供你們參考，和提意見進行改進。 通常的後臺管理系統，都有一個登錄頁面，而後進去有一個主頁，主頁的頭部和左側的導航是公用的，因此咱們先創建以下模塊。

commom: 能夠放置一些公用組件 home：放主頁，左側導航和，頭部，若是頭部負責，能夠以文件夾形式擴展或者分離 login：登錄頁 modules：裏面放home頁導航以後的 各類模塊頁面 修改router/index.js 裏面的路由配置 ，指向homePage.vue頁面 至此，根據element ui 的相關組件，和本身寫一些頁面佈局頁面樣式便可看到以下界面

看到這裏的鞋同門是否是有點蒙圈了呢，不過不要着急，個人代碼發佈在github：https://router.vuejs.org/zh-cn/index.html](https://router.vuejs.org/zh-cn/index.html) 接下來的幾節內容將詳細介紹vue-router、axios、等相關內容結合業務場景需求將如何配置。 下一節：vue多環境配置