vue+Element后台管理系统框架搭建（一）

最新推荐文章于 2025-07-06 14:12:37 发布

sinat_33564062

最新推荐文章于 2025-07-06 14:12:37 发布

阅读量9.3k

点赞数 5

CC 4.0 BY-SA版权

分类专栏：技术文章标签：前端 VUE ELement

本文链接：https://blog.csdn.net/sinat_33564062/article/details/103261291

本文介绍了如何搭建基于Vue和Element的后台管理系统，包括环境配置、项目创建、开发规范，以及Vue2.0的概念和语法，如MVVM模式、数据驱动、组件化、指令系统，还涉及Vue Router、Vuex和ElementUI的集成和使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue+Element后台管理系统框架搭建

vue框架搭建及开发规范

vue框架搭建及开发规范

1.1环境配置

node.js
使用v8.1.3版本来开发
使用nvm来管理node可以方便切换要使用的node版本。
npm 使用5.0.3版本
npm配置了淘宝镜像
npm config set registry https://registry.npm.taobao.org
webpack
安装版本3.3.0
webpack是一款前端资源模块化管理和打包工具，它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
Vue-cli
vue-cli是一个用于生成vue项目的脚手架工具
vue-cli 我安装的版本2.8.2
安装：npm install -g vue-cli
同样在命令行输入 vue -V 检测是否安装成功并查看安装的版本，注意是大写的V
如果成功返回：
在这里插入图片描述
vuex
安装的版本为2.3.1
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
可以理解为组件通信的集中管理。
vue-router
用于SPA实现单页路由，类似angular的angular-ui-router。

1.2项目创建

1.开始搭建项目vueProject

前面提到了vue-cli脚手架工具，使用起来很简单，在你想创建项目的目录下输入cmd：
vue init webpack vueProject //vueProject就是项目的名字
VUE项目创建
在输入之后会出现许多配置项，一路enter就可以了。但是其中的ESLint推荐不使用(运行的时候会检查代码规范，规范什么的太麻烦，毕竟是小demo)，ESlint是可以配置规范的，在多人协作开发的过程中，代码的规范非常的重要。有一套良好的代码规范，对于项目的开发和维护都很友好。

下面对每个配置项做个注释：
? Project name vueProject //项目名默认就是vueProject
? Project description A Vue.js project // 文档描述，会在README.md文件上生成输入的内容，默认 A Vue.js project
? Author _**** <****@**.com> // 作者，如果有git，就是读取git的User信息
? Vue build standalone // 有两个选项，第一个选项写着recommended for most users果断选了（至于干什么用到并不知道）
? Use ESLint to lint your code? Yes// 是否使用ESlint 默认是
? Pick an ESLint preset Standard // 选这个一个ESlint类型
? Setup unit tests with Karma + Mocha? Yes //使用单元测试工具karma和mocha 默认是
? Setup e2e tests with Nightwatch? Yes // 使用e2e测试框架 NightWatch 默认是

2.打开我们的项目，可以看到如下的目录结构：

build：webpack打包配置文件夹
config：同样是打包配置的文件夹，只是职能不同
src：源码存放文件夹
static：静态文件存放位置
test：测试代码存放位置，展开可以看到单元测试和e2e测试两个目录
.babelrc ： babel的配置文件，有关babel可参见
http://www.ruanyifeng.com/blog/2016/01/babel.html
index.html: 单页应用的html文件，可以看成是一个窗口(window)
package.json: npm的配置文件，配置项目信息，需要安装的模块之类
README.md：项目说明文档
目录分析完了，怎么启动这个项目呢？
在启动之前还需要安装我们的依赖模块，也就是package.json里面的模块，在根目录下cmd：
npm install
这个过程有点久，建议将npm配置为国内镜像，比如我之前说得淘宝镜像
安装完了之后我们的项目目录会多出一个node_modules目录，里面会有很多很多文件夹。
安装完之后就运行我们项目了，在根目录下cmd：
npm run dev
然后浏览器中输入localhost:8080（其实会自动弹出），就可以看到如下页面
在这里插入图片描述

1.3开发规范

1.vueProject的目录结构：

在这里插入图片描述
├── README.md 项目介绍
├── index.html 入口页面
├── build 构建脚本目录
│ ├── build-server.js 运行本地构建服务器，可以访问构建后的页面
│ ├── build.js 生产环境构建脚本
│ ├── dev-client.js 开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新
│ ├── dev-server.js 运行本地开发服务器
│ ├── utils.js 构建相关工具方法
│ ├── webpack.base.conf.js wabpack基础配置
│ ├── webpack.dev.conf.js wabpack开发环境配置
│ └── webpack.prod.conf.js wabpack生产环境配置
├── config 项目配置
│ ├── dev.env.js 开发环境变量
│ ├── index.js 项目配置文件
│ ├── prod.env.js 生产环境变量
├── package.json npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
├── src 源码目录
│ ├── main.js 入口js文件
│ ├── app.vue 根组件
│ ├── components 公共组件目录
│ ├── assets 资源目录，这里的资源会被wabpack构建
│ │ └──