vue-element-admin--环境搭建

简介: vue-element-admin--环境搭建

前戏


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

vue-element-admin 定位是后台集成方案,不太适合当基础模板来进行二次开发,因为本项目集成了很多你可能用不到的功能,会造成不少的代码冗余

官方还提供了一套基础模板 vue-admin-template ,我们基于它进行二次开发,想要什么功能或者组件就去 vue-element-admin那里复制过来。

官方文档:https://panjiachen.gitee.io/vue-element-admin-site/zh/

vue-element-admin 脚手架:

  • 在线预览:https://panjiachen.gitee.io/vue-element-admin

vue-admin-template 脚手架:

  • 在线预览:https://panjiachen.gitee.io/vue-admin-template
  • github 源码:https://github.com/PanJiaChen/vue-admin-template


克隆 vue-element-admin 项目与安装依赖


# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git
# 进入项目目录
cd vue-element-admin
# 安装依赖
npm install
# 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org
# 本地开发 启动项目
npm run dev

报错声明:拉取项目后,当执行 npm install 时,如果提示 node-sass 下载失败,则在项目根目录创建一个 .npmrc文件,文件内容是把 node-sass 的路径修改成淘宝的 npm,

sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
registry=https://registry.npm.taobao.org

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

我们把 vue-element-admin 当做后台集成方案,然后在 vue-admin-template 的基础上进行二次开发,想要什么功能或者组件就去 vue-element-admin 那里复制过来,所以我们在克隆 vue-admin-template 到本地


克隆 vue-admin-template 项目与安装依赖


# 克隆项目
git clone https://github.com/PanJiaChen/vue-admin-template
# 进入项目目录
cd vue-admin-template
# 安装依赖
npm install
# 本地开发,启动项目
npm run dev

浏览器访问 http://localhost:9528


目录结构


本项目已经生成了一个完整的开发框架,提供了涵盖中后台开发的各类功能和坑位,下面是整个项目的目录结构

├── build                      # 构建相关
├── mock                       # 项目mock 模拟数据
├── plop-templates             # 基本模板
├── public                     # 静态资源
│   │── favicon.ico            # favicon图标
│   └── index.html             # html模板
├── src                        # 源代码
│   ├── api                    # 所有请求
│   ├── assets                 # 主题 字体等静态资源
│   ├── components             # 全局公用组件
│   ├── directive              # 全局指令
│   ├── filters                # 全局 filter
│   ├── icons                  # 项目所有 svg icons
│   ├── lang                   # 国际化 language
│   ├── layout                 # 全局 layout
│   ├── router                 # 路由
│   ├── store                  # 全局 store管理
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用方法
│   ├── vendor                 # 公用vendor
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
│   └── permission.js          # 权限管理
├── tests                      # 测试
├── .env.xxx                   # 环境变量配置
├── .eslintrc.js               # eslint 配置项
├── .babelrc                   # babel-loader 配置
├── .travis.yml                # 自动化CI配置
├── vue.config.js              # vue-cli 配置
├── postcss.config.js          # postcss 配置
└── package.json               # package.json

相关文章
|
1月前
vue3-admin-element-template配置正向代理报错
vue3-admin-element-template配置正向代理报错
38 0
|
11月前
|
JavaScript 前端开发 Java
vue3-element-admin 项目说明文档
vue3-element-admin 项目说明文档
|
7月前
|
编解码 JavaScript 前端开发
Vue项目实战(01)-vue-element-admin项目结构分析
Vue项目实战(01)-vue-element-admin项目结构分析
103 1
|
1月前
|
JavaScript
Vue中$root的使用方法
在 Vue 中,`$root`是一个属性,用于访问根组件实例。它的作用是连接所有其他的 Vue 实例组件,并向子组件提供全局配置和实例方法。根实例是 Vue 的上下文环境,包含了整个 Vue 应用的数据和方法。使用$root属性,可以方便地访问根实例的方法、数据和生命周期钩子函数。
|
1月前
|
JavaScript
vue及element项目环境搭建
vue及element项目环境搭建
|
1月前
|
JavaScript 定位技术 数据安全/隐私保护
vue-next-admin框架的认识
vue-next-admin框架的认识
593 0
|
7月前
vue-element-admin打包后白屏的问题
vue-element-admin打包后白屏的问题
64 0
|
7月前
|
JavaScript 前端开发 程序员
vue-element-admin 运行并且打包部署
vue-element-admin 运行并且打包部署
126 0
|
7月前
|
前端开发 JavaScript
vue-element-admin上传图片的功能
vue-element-admin上传图片的功能
86 0
|
7月前
vue3-admin-element安装
vue3-admin-element安装

热门文章

最新文章