1.2 Vue.js كود يېزىشتىن بۇرۇنقى تەييارلىق

1.2 Vue.js كود يېزىشتىن بۇرۇنقى تەييارلىق

Vue نىڭ ئېچىش قۇراللىرى كود يېزىش قۇرالى بىلەن تور كۆرگۈچنى ئۆز ئىچىگە ئالىدۇ. تور كۆرگۈچ بولسا Vue كودىنى ئىجرا قىلىشقا ۋە تەڭشەشكە ئىشلىتىلىدۇ، كود يېزىش قۇرالى يۇقۇرى ئۈنۈمدە سۈپەتلىك كود يېزىشقا ئىشلىتىلىدۇ.

1.2.1 تور كۆرگۈچ

Js تور كۆرگۈچكە بېقىنىپ ئىجرا بولىدۇ، Js ئۆگۈنۈشتىن بۇرۇن ئاۋال تور كۆرگۈچنى چۈشۈنۈش كېرەك. نۆۋەتتە ئاساسى ئېقىم بولىۋاتقان تور كۆرگۈچلەردىن IE/Edge، FireFox، Safari، Opera، ۋە Chrome لار بار.
تور كۆرگۈچنىڭ يادروسىنى ئىككى تۈرگە ئايرىشقا بولىدۇ، يەنى ھاسىللاش ماتورى ۋە Js ماتورى. ھاسىللاش ماتورى HTML XML سۈرەت قاتارلىق ئېلېمېنىت لارنى ئۇقۇپ ئېلىپ، بۇلارنى ئىكران يۈزىگە بىز يازغان خاسلىق بويىچە كۆرسىتىشكە مەسئۇل، Js ماتورى بولسا Js كودىنى ئانالىز قىلىپ تەرتىپ بۇيىچە ئىجرا قىلىپ ئالاھىدە ئۈنۈم يارىتىشقا مەسئۇل.

1.2.2 كود تەھرىرلىگۈچ

ھەر قانداق بىر تېكىست تەھرىرلىگۈچتىن پايدىلىنىپ Vue يېزىشقا بولىدۇ، بىراق ئۈنۈمنى يۇقۇرى كۆتۈرۈش ئۈچۈن كەسپى كود تەھرىرلىگۈچلەرنى تاللاپ ئىشلىتىمىز. كەسپى كود تەھرىرلىگۈچ ئىككى خىلغا بۆلىنىدۇ، IDE توپلاشتۇرۇلغان ئېچىش مۇھىتى ۋە يىنىك تىپتىكى كود تەھرىرلىگۈچ.

1. IDE نىڭ ئۆز ئىچىگە ئالىدىغانلىرى : مەسلەن VSCode، WebStorm، بۇنىڭ ھەر ئىككىلىسى سۇپا ئاتلاپ ئىجرا بولالايدۇ.
2. يىنىك تىپتىكى كود تەھرىرلىگۈچ : مەسلەن Sublime Text، Notepad++، Vim، Emacs قاتارلىقلار. بۇخىل تەھرىرلىگۈچلەر تاق ھۆججەتلىك كودلارنى تەھرىرلەشتە بىر قەدەر قولاي.

Vue كود يېزىشتا VsCode تەۋىسىيە قىلىنىدۇ، چۈنكى VsCode نىڭ كۈشلۈك بولغان JS كود تەھرىرلەش ئىقتىدارى ھەم كۆپ مىقتاردىكى قىستۇرمىلىرى بار، بۇلار بىزنىڭ كود يېزىش ئۈنۈمىمىزنى بىر ھەسسە يۇقۇرى كۆتۈرەلەيدۇ، ئەڭ مۇھىم يىرى پۈتۈنلەي ھەقسىز. بۇ يەردە ئىككى قىستۇرما تەۋىسىيە قىلاي، VsCode نىڭ قىستۇرما بازىرىغا Chinese دەپ ئىزدەش ئارقىلىق خەنزۇچە تىل بولاق قىستۇرمىسىنى چۈشۈرۈپ قاچىلىۋالساق بولىدۇ، بۇ نىڭدا كۆرۈنمە يۈزى خەنزۇچە كۆرۈنىدۇ، يەنە بىرسىنى Live Server، بۇ قىستۇرما يەرلىكتە كىچىك تىپتىكى مەۋھۇم مۇلازىمىتىر قۇرىدۇ، ھازىر تەھرىرلەۋاتقان تور بەت ھۆججىتىنى ئوڭ چىكىپ OpenwithLive نى تاللاش ئارقىلىق تور كۆرگۈچتە ئىجرا قىلالايمىز، ئاندىن ھەر قېتىپ كودنى تەھرىرلەپ ساقلىغان ۋاقتىمىزدا تور كۆرگۈچ ئاپتۇماتىك يېڭىلىنىدۇ. ( VsCode نى تەڭشەش ۋە بىرقىسىم قولايلىق قىستۇرمىلار توغرىسىدا ئايرىم تىما يوللايمەن ).

ئەسكەرتىش VsCode دا كود يازغان ۋاقىتتا كود فورماتىنى بىرخىل قىلساق ئۆلچەملىك چىقىدۇ ھەم كەسپى بولىدۇ.

1. ئاۋال Tab كۇنۇپكىسىنى باسقاندىن كىيىنكى بوش ئورۇننى بىردەك قىلىمىز، بۇنى تەڭشەش ئۈچۈن تەھرىرلىگۈچ تەڭشەك بىتىنى ئېىچپ Tab Size

دەپ ئىزدەپ تەڭشىۋالساق بولىدۇ.

2. Vetur قىستۇرمىسىنى قاچىلايمىز، بۇ ئارقىلىق Vue كودىنى فورماتلىغىلى بولىدۇ.
3. Prettier-Code formatter قىستۇرمىسىنى قاچىلايمىز، بۇ قىستۇرما CSS، Less، Js قاتارلىق كودلارنى فورماتلايدۇ، Vetur نىڭ فورماتلاش شەكلى

مۇشۇنىڭ شەكلى بىلەن ئوخشاش، بۇنداق بولغاندا Vue كودى بىلەن باشقا
كودلارنى بىردەك فورماتلىغىلى بولىدۇ.

1.2.3 تور كۆرگۈچ كونتىرول تاختىسى

ھازىرقى تور كۆرگۈچلەرنىڭ ھەممىسى پىروگراممىرلارغا كونتىرول تاختىسى تەمىنلىگەن، بۇ ئارقىلىق Js كودنىڭ خاتالىقلىرىنى كۆرۈشكە، ئۇچۇر ئۇرۇپ چىقىرىشقا، ئىشلىتىلىدۇ، بۇ ئىقتىدار بىزگە نىسپەتەن ناھايىتى مۇھىم، بۇنىڭدىن چۇقۇم ياخشى پايدىلىنىشىمىز كېرەك، تور كۆرگۈچتە تۇرۇپ F12 نى باسساق پىروگراممىرلار تەڭشەك بىتى ئېچىلىدۇ، بۇ بەتتىن Cosole نى ياكى 控制台 نى چىقىش ئارقىلىق كونتىرول تاختىسىنى ئاچقىلى بولىدۇ، كونتىرول تاختىسىدا خاتالىق قىزىل رەڭدە، ئاگاھلاندۇرۇش سېرىق رەڭدە كۆرسۈتىلىدۇ.