手把手教Vue+elementUI搭建后台管理系统（一）：项目介绍

基本介绍

使用 vue 以及 element-ui 搭建一个 后台管理系统的项目框架，为了方面后续vue项目的开发，可以达到拿来即用的效果。主要涉及到内容包含：项目开发环境安装及配置、elementui的使用；cookie、axios、mock等封装处理；i18n国际化；vuex状态管理；vue-router路由管理；axios、router、业务代码等模块化封装；vue-router动态路由加载；常用组件封装步骤及封装思想等。

软件及技术

开发工具：

HBuilderX 、Visual Studio Code 等

环境：

node 　　　　 运行环境
npm 　　　 包管理工具
webpack　　 打包工具
vue-cli 　　　 项目创建脚手架工具

依赖：

vuex 　　　　 状态管理（处理组件间数据交互）
axios 　　　　 请求管理（发送 ajax 请求并处理）
router 　　　　 页面跳转（各组件间跳转规则）
js-cookie 　　　　 处理 cookie
mockjs 　　　　 模拟后端数据处理
element-ui 　　　　 页面显示
vue-i18n 　　　　 国际化处理

项目目录

最终完成项目目录结构基本如下：

|--- dist                项目打包后的文件夹（npm run build）
|
|--- node_modules        存放第三方依赖（npm install 执行产生）
|
|--- public              存放静态文件夹
|   |--- favicon.ico     是网站图标 
|   |--- index.html      页面入口文件
|
|--- src                 存放源码文件夹
|   |--- assets         存放 css、图片等文件
|   |--- http           用于存放、封装 axios 请求
|   |--- components     存放全局共用组件
|   |--- views          存放视图组件
|   |--- router         存放路由配置
|   |--- store          存放 vuex 配置
|   |--- mock           项目 mock 模拟数据
|   |--- utils          存放全局公用方法
|   |--- i18n           国际化 language
|   |--- App.vue        入口组件
|   |--- main.js        入口 js， 加载组件、初始化等
|
|--- .gitignore         指定文件无需提交到git上
|
|--- .env.development   开发环境配置文件
|
|--- .env.production    生产环境配置文件
|
|--- balel.config.js    使用一些预设
|
|--- package.json       项目描述及依赖
|
|--- package-lock.json  版本管理使用的文件
|
|--- vue.config.js      项目配置文件
|
|--- README.md          项目介绍