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多环境配置