Vue.js+Element-UI从0到部署:基础篇（2.相关依赖注入）依赖安装完成之后，重新 npm run buil

上一节中我们介绍到如何搭建一个简易项目 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多环境配置