vue2admin

vue2-admin - ฐานนั่งร้าน Vue2.js

เฟรมเวิร์กพื้นฐานของระบบการจัดการพื้นหลังที่ใช้ vue2 + vue-router + vuex + fetch + PostCSS + element-ui (UI อื่นๆ ก็สามารถใช้ได้ เช่น iView) + webpack2

ความสามารถของกรอบงาน:

• สถาปัตยกรรมตามส่วนประกอบโดยสมบูรณ์
• เนมสเปซ CSS แบบอิงคอมโพเนนต์มีความเป็นอิสระและไม่ก่อให้เกิดมลพิษซึ่งกันและกัน
• ฟังก์ชันเข้าสู่ระบบ (ใช้รูปแบบการคงอยู่ของ vuex และคุกกี้สำหรับการแคชการตรวจสอบสิทธิ์การเข้าสู่ระบบ)
• รองรับการกำหนดเส้นทางหลายระดับ
• การจัดการสถานะตาม vuex2 (แนะนำให้ติดตั้ง vue.js devtools ปลั๊กอินของ chrome เพื่อติดตามสถานะระหว่างการพัฒนา)
• การสนับสนุนการคงอยู่สำหรับ vuex2 และคุกกี้ (สนับสนุนการคงอยู่ของสถานะ vuex ที่ระบุและสามารถระบุเวลาหมดอายุของคุกกี้ได้) สำหรับตัวอย่างที่เฉพาะเจาะจง โปรดดูซอร์สโค้ดของโปรเจ็กต์: srcstoreindex.js
• การสนับสนุน PostCSS: รองรับการประกอบคำนำหน้าอัตโนมัติ (ปลั๊กอิน autoprefixer) รองรับไวยากรณ์ css ล่าสุด (ปลั๊กอิน postcss-cssnext) และรองรับเมธอด @import เพื่อแนะนำ css สำหรับตัวอย่างเฉพาะ โปรดดูซอร์สโค้ดของโปรเจ็กต์: srcmodulespage1index.vue
• บริการเครือข่ายตามการดึงข้อมูล (เส้นทางซอร์สโค้ด: srcutilsrequest.js)
• รองรับบริการข้อมูลจำลอง (เส้นทางตัวอย่างจำลอง: srcapismock)
• การพัฒนา การสร้าง และการคอมไพล์โดยใช้ webpack2: รองรับ HRM ในขั้นตอนการพัฒนา รองรับการพึ่งพาโมดูล การเพิ่มประสิทธิภาพทรัพยากรแบบคงที่ การบรรจุโมดูล และการพิมพ์ลายนิ้วมือของแฮช และฟังก์ชันการคอมไพล์อื่นๆ คำสั่งเดียวสามารถสร้างและคอมไพล์ของโปรเจ็กต์ทั้งหมดได้
• ตัวอย่างของโซลูชันการบรรจุโปรเจ็กต์ขนาดใหญ่ของ webpack (การแยกโค้ดตามต้องการ) โปรดดูที่ไดเร็กทอรี: srcmodulescode-splitting-demo

คลิกที่นี่เพื่อดูผลการวิ่ง (ไม่จำกัดชื่อผู้ใช้และรหัสผ่าน)

说明：项目框架已经集成了大部分前端项目必须的插件服务和项目逻辑架构，可以拿来即用。让框架尽量简单，逻辑尽量清晰，编译构建过程完全可定制，也是本框架追求的目标之一。

สร้างการตั้งค่า

依赖环境：运行项目前请确认本地已安装nodejs和npm。依赖的版本如下：
- "node": ">= 4.0.0"
- "npm": ">= 3.0.0"

※ 开发和运行时阶段依赖的其他包请到package.json中查看

 # 安装依赖-国内用户推荐使用npm淘宝镜像，设置方法：
# step1.npm config set registry https://registry.npm.taobao.org 
# step2.npm info underscore 
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test 

โครงสร้างไดเรกทอรีโครงการ

 src：项目源码。开发的时候代码写在这里。
 |--assets # 项目静态资源，编译时不进行处理的资源都放这里
 |--components # 项目公共组件库
 |--config # 公共配置文件，例如路由配置等
 |--css # 项目公共样式库
 |--modules # 项目应用模块，根据应用需要，还可以有子模块，各子模块目录结构和顶级子模块类似
 |    |--components # 模块级公共组件
 |    |--views # 模块视图
 |    |--css # 模块样式
 |    |--js # 模块脚本
 |--App.vue # 项目根视图
 |--main.js # 项目入口文件
 |--store # 基于vuex的状态管理模块
 |    |--index.js # 入口及store初始化
 |    |--mutation-types.js # mutation名称定义
 |    |--state.js # 根state
 |    |--mutations.js # 根mutation
 |    |--getters.js # 根getter
 |    |--actions.js # 根action
 |    |--modules # 子模块的store对象
 |    |    |--menu.js # menu模块
 |--apis # 服务层ajax请求服务
 |    |--mock # api数据mock服务
 |--utils # 公共库函数
 |    |--request.js # 网络请求服务，实现了对fetch的二次封装（目前只封装了get,post；实际项目中可按着示例封装其他请求）

โครงสร้างหน้า

สิ่งที่ต้องทำ

• โซลูชันแคชในเครื่องสำหรับการดึงข้อมูลและพนักงานบริการ
• ความเป็นสากล
• ปลั๊กอินแผนภูมิ