zhaotoday / Iview
admin template based on Vue CLI 3 & iView. 基于 Vue CLI 3 + iView 的 Vue.js 后台管理系统。
Stars: ✭ 485
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Iview
Blog
一个go、echo、vue 开发的快速、简洁、美观、前后端分离的个人博客系统(blog)、也可方便二次开发为CMS(内容管理系统)和各种企业门户网站
Stars: ✭ 388 (-20%)
Mutual labels: vue-cli, iview
Iview Admin
Vue 2.0 admin management system template based on iView
Stars: ✭ 15,963 (+3191.34%)
Mutual labels: vue-cli, iview
Vue Cli Plugins
🔌 A collection of Vuetify plugins for Vue CLI
Stars: ✭ 381 (-21.44%)
Mutual labels: vue-cli
Lulumi Browser
Lulumi-browser is a lightweight browser coded with Vue.js 2 and Electron.
Stars: ✭ 367 (-24.33%)
Mutual labels: vue-cli
Vue Develop Template
A Vue.js template that can support more than 100 thousand lines of code in our business, I hope it can help you too~
Stars: ✭ 481 (-0.82%)
Mutual labels: vue-cli
Vue2 News
基于vue2 + vue-router + vuex 构建的一个新闻类单页面应用 —— 今日头条(移动端)
Stars: ✭ 462 (-4.74%)
Mutual labels: vue-cli
Netease yanxuan
vue版网易严选,体验网易严选购物流程,线上访问:http://zhaoboy.bid/yanxuan/#/
Stars: ✭ 417 (-14.02%)
Mutual labels: vue-cli
Vue Material Dashboard
Vue Material Dashboard - Open Source Material Design Admin
Stars: ✭ 403 (-16.91%)
Mutual labels: vue-cli
Cookiecutter Django Vue
Cookiecutter Django Vue is a template for Django-Vue projects.
Stars: ✭ 462 (-4.74%)
Mutual labels: vue-cli
Savuegram
A simple social media web app built with Vue.js and Firebase's Cloud Firestore as a way to teach people how to build a real-world app using the two technologies. Follow along with our tutorial.
Stars: ✭ 412 (-15.05%)
Mutual labels: vue-cli
关于
介绍
基于 Vue CLI 3 + iView 的后台管理系统,支持:开发调试、构建、代码规范校验等。
技术栈
Vue、Webpack、ES6、Vue Router、Vuex、Sass、PostCSS 等。
例子
线上的例子
用户:admin
密码:123456
服务端框架
https://github.com/zhaotoday/less.js
命令
# 下载代码
$ git clone https://github.com/zhaotoday/iview.git
# 安装依赖
$ npm install
# 开发调试
$ npm run serve
# 代码校验
$ npm run lint
# 构建
$ npm run build
规范
项目结构
|-- public // 网站公共目录
| |-- favicon.ico // 网站图标
| |-- index.html // 模板文件
|-- src // 源码目录
| |-- components // 公共组件
| |-- mixins // 混入
| |-- models // 数据模型
| |-- plugins // 插件
| |-- router // 路由配置
| |-- routes // 各个视图的路由配置
| |-- store // 状态管理
| |-- actions.js // 根级别的 actions
| |-- getters.js // 根级别的 getters
| |-- mutations.js // 根级别的 mutations
| |-- types.js // 根级别的 mutation types
| |-- modules // 各业务模块的局部状态管理
| |-- articles // 文章业务模块状态管理
| |-- styles // 样式
| |-- global // 全局样式
| |-- utils // Sass 工具
| |-- iview // 第三方 UI 库的样式(如:iView 等)
| |-- utils // JS 工具
| |-- views // 视图
| |-- articles // 文章页
| |-- home // 首页
| |-- root // 根页面
| |-- app.vue // 页面入口
| |-- main.js // 程序入口
公共组件规范
公共组件放在 /src/components 下。
|-- my-component // my component 组件
| |-- index.vue // my component 的入口
| |-- styles // my component 的样式
| |-- index.scss // my component 的样式入口
| |-- images // my component 的图片
| |-- utils // my component 的 JS 工具
| |-- components // my component 的子组件
| |-- child-component // my component 的子组件 child component
视图规范
视图放在 /src/views 下,也就是一个页面,对应一个路由。规范和公共组件一致。
加入 iView 组件库
提供 less 支持
# 安装 less-loader、less
$ npm install --save-dev less-loader less
自定义 iView 的主题
/src/styles/iview/index.less:
@import '~iview/src/styles/index.less';
/* 接下来开始覆盖 less 变量 */
引入 iView
/src/main.js:
import iView from 'iview'
Vue.use(iView)
引入 iView Loader
[官网原话]统一 iView 标签书写规范,所有标签都可以使用首字母大写的形式,包括 Vue 限制的两个标签 Switch 和 Circle。
$ npm install --save-dev iview-loader
module: {
rules: [
{
test: /\.vue$/,
use: [
{
loader: 'vue-loader',
options: {}
},
{
loader: 'iview-loader',
options: {
prefix: false
}
}
]
}
]
}
参考
网址
- Vue.js 中文网
- iView - 一套基于 Vue.js 的高质量 UI 组件库
- Vue.js 风格指南
- vue-router 中文网
- Vuex 中文网
- Vuex 通俗版教程
- Vuex 购物车示例
- Vue2.0 实践阶段性分享
- 单文件组件
- vue-devtools
相关链接
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].