前端框架vue-element-admin新手教程

行思理

已于 2024-12-03 15:42:12 修改

阅读量3.7k

点赞数 45

分类专栏： nodejs 文章标签： vue.js 前端框架前端

于 2024-11-28 17:01:20 首次发布

本文链接：https://blog.csdn.net/xzp19841203xzp/article/details/144115206

版权

nodejs 专栏收录该内容

13 篇文章

订阅专栏

1、介绍

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。

建议

本项目的定位是后台集成方案，不太适合当基础模板来进行二次开发。因为本项目集成了很多你可能用不到的功能，会造成不少的代码冗余。如果你的项目不关注这方面的问题，也可以直接基于它进行二次开发。

集成方案: vue-element-admin
基础模板: vue-admin-template
桌面终端: electron-vue-admin
Typescript 版: vue-typescript-admin-template (鸣谢: @Armour)
Others: awesome-project

2、前序准备

你需要在本地安装 node 和 git。本项目技术栈基于 ES2015+、vue、vuex、vue-router 、vue-cli 、axios 和 element-ui，所有的请求数据都使用Mock.js进行模拟，提前了解和学习这些知识会对使用本项目有很大的帮助。

3、目录结构

4、安装

# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git

# 进入项目目录
cd vue-element-admin

# 安装依赖
npm install

# 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npmmirror.com

# 本地开发 启动项目
npm run dev

注：

强烈建议不要用直接使用 cnpm 安装，会有各种诡异的 bug，可以通过重新指定 registry 来解决 npm 安装速度慢的问题。若还是不行，可使用 yarn 替代 npm。

Windows 用户若安装不成功，很大概率是node-sass安装失败，解决方案。

另外因为 node-sass 是依赖 python环境的，如果你之前没有安装和配置过的话，需要自行查看一下相关安装教程。

启动完成后会自动打开浏览器访问 http://localhost:9527，你看到下面的页面就代表操作成功了。

5、构建

当项目开发完毕，只需要运行一行命令就可以打包你的应用：

# 打包正式环境
npm run build:prod

# 打包预发布环境
npm run build:stage

构建打包成功之后，会在根目录生成 dist 文件夹，里面就是构建打包好的文件，通常是 ***.js 、***.css、index.html 等静态文件。

如果需要自定义构建，比如指定 dist 目录等，则需要通过 config的 outputDir 进行配置。

6、发布

对于发布来讲，只需要将最终生成的静态文件，也就是通常情况下 dist 文件夹的静态文件发布到你的 cdn 或者静态服务器即可，需要注意的是其中的 index.html 通常会是你后台服务的入口页面，在确定了 js 和 css 的静态之后可能需要改变页面的引入路径。

注：部署时可能会发现资源路径不对 ,只需修改 vue.config.js 文件资源路径即可。

publicPath: './' //请根据自己路径来配置更改

7、前端路由与服务端的结合

vue-element-admin 中，前端路由使用的是 vue-router，所以你可以选择两种方式：browserHistory 和 hashHistory。

两者的区别简单来说是对路由方式的处理不一样，hashHistory 是以 # 后面的路径进行处理，通过 HTML 5 History 进行前端路由管理，而 browserHistory 则是类似我们通常的页面访问路径，并没有 #，但要通过服务端的配置，能够访问指定的 url 都定向到当前页面，从而能够进行前端的路由管理。

本项目默认使用的是 hashHistory ，所以如果你的 url 里有 #，想去掉的话，需要切换为 browserHistory。修改 src/router/index.js 中的 mode 即可

export default new Router({
  // mode: 'history', //后端支持可开
})

如果你使用的是静态站点，那么使用 browserHistory 可能会无法访问你的应用，因为假设你访问 http://localhost:9527/dashboard，那么其实你的静态服务器并没有能够映射的文件，而使用 hashHistory 则不会有这个问题，因为它的页面路径是以 # 开始的，所有访问都在前端完成，如：http://localhost:9527/#/dashboard/。

不过如果你有对应的后台服务器，那么我们推荐采用 browserHistory，只需要在服务端做一个映射，比如：

//Apache
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

//nginx
location / {
  try_files $uri $uri/ /index.html;
}

Apache

需要修改router/index.js中new Router 配置，加一个base: '/vue/', 它指定应用的基路径，该应用是服务于localhost/vue路径下，所以必须加base配置，否则应用会展示 404 页面
需要修改config/index.js中 build 下的assetsPublicPath: '/vue/'，如果用相对路径，chunk 文件会报错找不到。
修改httpd.conf文件，开启 rewrite_module 功能。
LoadModule rewrite_module libexec/apache2/mod_rewrite.so，去掉前面的#。
然后找到AllowOverride None的那行，把它改成AllowOverride All，来使.htaccess文件生效。
在 apache 的www/vue 目录下新建.htaccess文件, 需要修改RewriteRule 为/vue/index.html, 否则刷新页面服务端会直接报 404 错误。

.htaccess 文件内容

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /vue/index.html [L]
</IfModule>

注：具体请看官方文档，这里只是整理的一部分

官方文档地址：https://panjiachen.github.io/vue-element-admin-site/zh/guide/#%E5%8A%9F%E8%83%BD