سلسلة vue - طريق التعثر في بناء إطار vue2-webpack2

représentent trois idées d'ingénierie frontale, react, vue, angular. L'apprentissage des trois cadres principaux consiste principalement à comprendre leurs concepts centraux, tels que les composants, les cycles de vie, les flux de données unidirectionnels, les liaisons bidirectionnelles, etc. Ces concepts dans le développement non-cadre, peu de gens pensent de manière systématique ainsi, pour les débutants, beaucoup de concepts n'ont pas été contactés, ne savent pas par où commencer un projet react, vue ou angular, ci-dessous, je vais construire un projet vue de zéro, en faisant le projet et en apprenant les idées de vue.

1. ما هي الخطوة الأولى التي يجب أن أتخذها لاستخدام vue؟

للتعلم عن vue، أول شيء يجب أن أفعله هو الذهاب إلى صفحة معلومات vue الرسمية:https://cn.vuejs.org/v2/guide...، راجعتها بعناية، وجدت أن هناك فرقًا بين إصدار 1.X وإصدار 2.X من vue، جيد، اخترت 2.X بلا تردد.

اخترت إصدار vue، بحثت على知乎 عن طرق بناء إطار العمل vue، شاهدت مشاركات السابقين، وتعلمت عن وجود شيء يُدعى cooking ما هو الجيد في هذا الشئ؟

يهدف cooking إلى تحريرك من تكوينات البناء المزعجة، ويساعد أيضًا في تجنب الحاجة إلى تثبيت مجموعة من التبعيات التنموية لكل مشروع. بناءً على webpack ولكن مع خيارات تكوين أكثر ودية، وآلية تكوين توسع سهلة الاستخدام، يمكنك التركيز على المشروع وتجاهل التكوين.

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

في هذه اللحظة، يمكنك فقط بناء المشروع من الصفر.

2. أنشئ مشروع vue2-web جديد في github.

افتح صفحة github الرئيسية، انقر على start a project.

ثم سترى Create a new repository، تحتاج إلى ملء معلومات المشروع، قم بتخطي هذه الخطوة.

ثم سيتم إنشاء المشروع، قم بفك تشفيره إلى محلي.

3. بدء npm

استخدم shell أو cmd للدخول إلى مجلد الجذر للمشروع، وأecute الأمر التالي، قم بتجاهل الخيارات، وسيتم إنشاء ملف package.json في النهاية.

npm init

4. تثبيت webpack

يبدو أنك لا يمكنك العيش بدون webpack، ولكن تكوين webpack يمكن أن يجعلك تعيش بلا أمل، من الصعب جدًا تذكر خيارات تكوين webpack، ولكن لا تقلق، لقد قمت بإنجاز هذا الخطوة بالفعل، يجب علينا جميعًا استخدام webpack2.

npm install --save-dev webpack

تحتاج أيضًا إلى خادم前端، للقيام بتحديثات ساخنة، يأتي دور webpack-dev-server.

npm install --save-dev webpack-dev-server

5. أنشئ ملف webpack.config.js

لا يوجد فرق كبير بين ملف تكوين webpack في react، فقط قم بتغيير مكان واحد للاستخدام.

لا تدخل js وvue معًا، لا يعملون، يجب أن يكونوا منفصلين، يجب، هذه الحفرة التي وقعت فيها، استهلكت ساعات عديدة للبحث عن هذه الحفرة، أكثر الأماكن مخفية.

rules: [{
   test: /\.js$/
   use: ['babel-loader'],
   exclude: /node_modules/,
   include: resolve('src')
  },{
   test: /\.vue$/
   use: ['vue-loader'],
   exclude: /node_modules/,
   include: resolve('src')
  },

6. إنشاء ملف .babelrc

لا يمكن تفادي Babel، انتبه أننا لا نستخدم React هنا، بل Vue، بما في ذلك هذه الأدوات المدمجة، flow-vue، transform-vue-jsx.

{
 "presets": ["es2015", "flow-vue", "stage-0", "stage-2"],
 "plugins": ["transform-vue-jsx"],
 "comments": false,
 "env": {
 "production": {
  "plugins": [
  ["transform-runtime", { "polyfill": false, "regenerator": false }]
  ]
 }
 }
}

7. إضافة الأمر start في package.json

استخدم webpack-dev-server لبدء التشغيل مباشرة، واو، الكثير من الأخطاء، يقول أن بعض المodule مفقودة، هذا بسيط، لأن المodule التي تم اقتباسها في ملف التكوين لم يتم تثبيتها في المشروع بعد، في هذه الحالة يمكنك تثبيتها واحدة تلو الأخرى.

"start": "webpack-dev-server",

8. ملف الدخول الرئيسي main.js

هذا الملف يمكن أن يكون أي اسم تريده، الكود بسيط جدًا، إنشاء Vue وروتين، أليس يشبه ملف الدخول الخاص بـ react؟ بالطبع، أنا أعمل على SPA، لذا أستخدم شكل الدخول الواحد، إذا كان نمط غير SPA، فإن هذا النوع من التكوين لن يكون كذلك.

import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import routes from './routes';
import VueResource from 'vue-resource';
Vue.use(VueResource); //http请求注册
Vue.use(VueRouter); // تسجيل مسار
// إنشاء مسار
const router = new VueRouter({
 // mode: 'history', //H5 مسار نمط، يتطلب خدمة التطبيق للتحويل لمنع خطأ 404
 base: __dirname,
 linkActiveClass: 'on',
 routes
})
let render = new Vue({
 router,
 el: '#app',
 render: h => h(App)
});
render;
// if (module.hot) {
//  غير ضروري
//  module.hot.accept('./App.vue', () => render);
// }

9، مسارات routes.js

مسار وreact أيضًا مشابه جدًا (كأنه مثالي جدًا)، ويتم كتابة صفحات Vue هنا باستخدام نهاية .vue.

import Home from './components/home/Home.vue';
import Bang from './components/bang/Bang.vue';
export default [
 {
  path: '/',
  redirect: 'home'
 },
 {
  path: '/home',
  component: Home
 },
 {
  path: '/bang',
  component: Bang
 }
]

10، الصندوق الرئيسي App.vue

من index يأتي هذا الملف، الآن سأبدأ في تعلم جوهر Vue.

template: لغة النمذجة في Vue، وتسمى أيضًا jsx.

transition: تأثير التحويل.

router-view: صندوق عرض المسار، يتم عرض الملفات .vue التي يتم تحميلها عن طريق router-link في هذا الصندوق. تم تعبئة router-link في مكون nav.vue.

script: تم استيراد المكونات Vue المطلوبة للعلوي من الصندوق، بما في ذلك الرأس والتنقل والصفحة الرئيسية. هناك إعدادات غنية أخرى لم أدرسها، وسأقوم بالتعرف عليها بشكل أعمق في التعلم المستمر.

style: الحالي نمط المكون، لقد قمت بتهيئة دعم لغة less. يمكنك تغيير style إلى <style lang="less"> لتحرير less.

<template>
 <div>
  <app-header logo="logo" ></app-header>
  <app-nav></app-nav>
  <transition name="fade" mode="out-in">
   <router-view class="view"></router-view>
  </transition>
 </div>
</template>
<script>
 import Header from './components/common/Header.vue';
 import Nav from './components/common/Nav.vue';
 import Home from './components/home/Home.vue';
 export default {
  name: 'App',
  components: {
   "app-header": Header,
   "app-nav": Nav,
   "app-home": Home
  }
 };
</script>
<style>
 body, html {
  font-size: 12px;
  margin: 0;
  padding: 0;
 }
</style>

في عملية التعثر، واجهت أيضًا عدة حالات خطأ، ولكن تم حلها جميعًا بنجاح.

إذا كنت ترغب في رؤية كود مكونات vue المفصل، يمكنك الرجوع إلى المشروع المحدد:https://github.com/hyy1115/vu...

سأستمر في تحسين هذا المشروع، للبحث عن تنفيذ أكثر مرونة لإطار العمل vue.

صورة تشغيل:demo vue-酷我

النهاية

ما ذكرته أعلاه هو سلسلة vue التي قدمها ليكم المحرر - طريق التعثر في بناء إطار العمل vue2-webpack2، آمل أن يكون هذا مفيدًا لكم. إذا كان لديكم أي أسئلة، فلا تترددوا في ترك تعليق، وسأقوم بالرد على رسائلكم في أقرب وقت. وأشكركم أيضًا على دعمكم لتعليمات النطق!