vue3.0 admin

vue3-admin

مقدمة

vue3-admin عبارة عن عرض للصفحة الأمامية لنظام إدارة الواجهة الخلفية، والذي تم إنشاؤه وتنفيذه بواسطة vue-cli4 وelemnet-ui. يتم استخدام أحدث إطار عمل Vue، ويتم اعتماد نموذج التطوير القائم على المكونات داخليًا، بحيث يتبع كل مكون مبدأ الوظيفة الفردية قدر الإمكان. على الرغم من أنه قد يبدو متعبًا بعض الشيء في البداية (لأن المكون الفرعي له وظيفة واحدة، لذلك هناك الكثير من الاتصالات الداخلية)، إلا أن له فوائد كبيرة للصيانة اللاحقة. يستخدم المشروع تخطيطًا مربعًا مرنًا (مرنًا)، لذلك يكون له أيضًا تأثير عرض أفضل على الجهاز المحمول. يمكنك فتح العرض التوضيحي على الجهاز المحمول للعرض.

لقد انتهت مهلة الخادم ولم يتم تجديده، وقد تم إيقاف تشغيله ولا يمكن معاينته في الوقت الحالي. إذا كنت مهتمًا، فيرجى سحب الكود وتشغيله بنفسك.

العرض التوضيحي (نظرًا للإصدار منخفض التكوين من خادم Alibaba Cloud الذي اشتراه المؤلف نفسه، قد يكون وقت الطلب أطول قليلاً)

العرض التوضيحي عبر الإنترنت

يمكنك مسح رمز الاستجابة السريعة ضوئيًا على الجهاز المحمول لعرضه

للحصول على تجربة تطوير أسرع وأفضل، قم بمراجعة المشاريع أدناه

vue3 مشروع عملي

يطور

 # 克隆项目
git clone [email protected]:guodonglw/vue3.0-admin.git

# 进入项目目录
cd vue3.0-admin

# 安装依赖
npm install

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

# 启动服务
npm run serve

# 如遇到node-sass的问题，可尝试
npm rebuild node-sass

الوصول إلى المتصفح http://localhost:8080

يطلق

 # 构建生产环境
npm run build

سيظهر مجلد dist عند التغليف، فقط قم بفتح صفحة Index.html بمتصفح Chrome

دعم المتصفحات

المتصفحات الحديثة

فايرفوكس	الكروم	سفاري
الإصدارين الأخيرين	الإصدارين الأخيرين	الإصدارين الأخيرين

ملاحظة

 // 建议首先查看路由文件(了解项目路由以及如何进行动态生成前端路由)
// 页面查看顺序(登录页（views/Login）-> 首页(views/Home/Dashboard))，其中views/Home为其他页面的公共引用部分
// 与后端交互接口（请查看service/index.ts，数据由mock.js产生；实际开发请查看util/request.ts）
// 后台系统包括了登录，异步生成路由，echarts数据可视化，table表增删改查等功能，希望该demo示例可以帮助到有需要的朋友快速上手
// 根据vue-cli示例，主页面index.vue中会采用vue2的写法，在子组件中则有较大的变化，请仔细查看区别