تنزيل vue boilerplate template - تنزيل رمز المصدر vue boilerplate template

vue boilerplate template

فئات أخرى

vue-boilerplate-template V2.0.0

تنزيل

قالب Vue Boilerplate

(vue webpack vuex vue-router vue-i18n element-ui) خارج الصندوق

؟ قالب نموذجي لطيف لإنشاء مشروع متوسط بالإضافة إلى Vue.js(2.*).

中文 ويكي

الهدف والفلسفة

لمعرفة كيفية إنشاء مشاريع VUE متوسطة الحجم (+)، قم بتوفير بعض المراجع بناءً على الخبرة السابقة. أحدث إصدار من Vue Boilerplate المستند إلى vue-cli3 كان مفتوح المصدر: Awesome-vue-cli3-example، إذا انتبهت إليه، أعتقد أنه جدير بالاهتمام ؟.

المتطلبات الأساسية

Node.js (>=4.x، 8.x مفضل)، الإصدار 4+ من Npm (يفضل Yarn)، وGit.

تجريبي

صفحة تجريبية على الإنترنت

ميزة

بناءً على بناء vue-cli ، قم بإجراء المزيد من التحسين لكيفية تسهيل استخدام vue.
لقد شمل بالفعل الكثير من المكتبات شائعة الاستخدام، مثل vue-i18n و axios و lodash ...
مع بعض مقالات الخبرة حول Vue ، مثل: 如何写一手漂亮的 Vue. ومازال يتم تحديثه.
قم بإجراء المزيد من التحسين حول كيفية إنشاء التطبيق باستخدام WebPack .
- Webpack متاح الآن
- Webpack متاح الآن
- قم بتحسين مكتباتك باستخدام حزمة الويب
- Webpack برنامج تعليمي لطيف

الاستخدام

 git clone https://github.com/nicejade/vue-boilerplate-template (your-project-name)
cd your-project-name
npm install (npm i / yarn)
npm start / npm run dev / yarn run dev

انتقل إلى http://localhost:8080/. إذا كان المنفذ 8080 قيد الاستخدام بالفعل على جهازك، فسيقوم البرنامج بتحديد المنفذ المتاح (تزايدي) لك، على سبيل المثال، 8081 / 8082 ... . بالطبع، يمكنك استبدال المنفذ مؤقتًا باستخدام الأمر التالي:

 PORT=8888 npm run dev

ملحق إضافي : يجب التأكد من أن PORT هو أمر يمكن تنفيذه على جهازك.

المزيد من الأوامر

 npm run build

node build.js ، بدء مشروع البناء.

 npm run build:dll

webpack --config build/webpack.dll.conf.js ، لمزيد من المعلومات، راجع webpack.DllPlugin.

 npm run jarvis / yarn run jarvis

قم بتشغيل webpack-jarvis (لوحة تحكم Webpack ذكية جدًا تعتمد على المتصفح)، في متصفحك، افتح: localhost:1337، لقد حصلت عليه.

npm run pretest

باستخدام Nodejs لبناء الخادم المحلي: http://localhost:3000/، قم بإجراء اختبار مسبق بسيط للكود بعد الحزمة.

 npm run analyz

مكون Webpack الإضافي وأداة CLI التي تمثل محتوى الحزمة كخريطة شجرة تفاعلية مريحة وقابلة للتكبير/التصغير. سيتم فتح هذا العنوان تلقائيًا: http://localhost:8888/ .

قائمة البرنامج المساعد التابعة

vue2
vue-router
vuex
vue-i18n
أكسيوس
bootstrap
element-ui
لوداش
~~لحظة~~ com.dayjs
js-cookie
... ...

طلب العملية

يمكن للواجهة الخلفية الخاصة بك إرجاع بيانات التنسيق التالية، وهذا أفضل.

 {
  success: true,
  message: 'err message content',
  value: [
    // Useful data
  ]
}

في الواجهة الأمامية، يمكنك التعامل مع الطلب على النحو التالي:

 let params = {
  // Interface required parameters
}
this.isLoading = true
this.$apis.moduleName.getProfile(params).then(result => {
  // Handle the correct data you received
}).catch(error => {
  this.$message.error(`Error: ${error}`)
}).fin(() => {
  this.isLoading = false
})

لذا، فقد تمت مساعدة القالب في التعامل مع الطلب بشكل موحد، لذلك يمكنك أن تكون سهل الاستخدام للغاية، وبالطبع يمكنك تغيير القالب الخاص بك حسب الحاجة في ملف helper/ajax.js .