JavaSript ئاساسلىقى تور كۆرگۈچتە ياشايدۇ ( ئىجرا بولىدۇ )، Vue.js نى ئۆگۈنۈشتىن بۇرۇن چۇقۇم تور كۆرگۈچنى چۈشۈنىشىمىز كېرەك. نۆۋەتتە ئاساسى ئېقىم بولىۋاتقان تور كۆرگۈچلەردىن IE/Edg، FireFox، Opera، Safari ۋەى Chrome قاتارلىقلار بار.
IDE ئۆز ئىچىگە ئالىدىغان تەھرىرلىگۈچلەردىن VS Code ( ھەقسىز ) ۋە WebStorm (ھەقلىق) لارنى سۇپا ئاتلاپ ئىشلىتىشكە بولىدۇ.
يىنىك تىپتىكى كود يېزىش قۇراللىرى ئۆز ئىچىگە ئالىدىغانلاردىن Sublime Textx، Notepad++ ،Vim ،Emacs قاتارلىقلار بار، بۇلارنىڭ يۇقارقى ئىككى چوڭ تەھرىرلىگۈچتەك كۆپ مىقداردىكى قىستۇرمىلىرى يوق، ھەم ئىقتىدار جەھەتتىنمۇ تۆۋەنرەك تۇرىدۇ، لىكىن كومپىيوتىرغا نىسپەتەن تەلىپى خېلىلا تۆۋەن.
Vs Code نى ئىشلىتىپ Vue.js كودىنى يېزىش ۋە تەھرىرلەش تەۋىسىيە قىلىنىدۇ، بۇ كىچىك تىپتىكى تەھرىرلىگۈچ، ۋە ئىقتىدار قىستۇرمىلىرى كۆپ IDE تەھرىرلىگۈچلىرىدىكى ئىىقتىدار ۋە قىستۇرمىلارنىڭ ھەممىنى ئۆزىگە مۇجەسسەملىگەن بولۇپ، ھازىر ئەڭ ئالقىشقا ئىرىشۋاتقان، ۋە كۆپ ئىشلىتىلىۋاتقان كود تەھرىرلىگۈچلەرنىڭ بىرى. بۇنى ئورگان تورىدى ھەقسىز چۈشۈرۈپ قاچىلاشقا بولىدۇ، چۈشۈرگەندە كومپىيوتىر سىستىمىڭىزغا ماس كىلىدىغىنىنى ۋە نەشرىنى تاللاپ چۈشۈرسىڭىز بولىدۇ.
قاچىلاپ بولغاندىن كىيىن سول تەرەپ تىزملىكتىن قىستۇرما بازىرىنى ئېچىپ Chinese دىگەن ھالقىلىق سۆزنى ئىزدەش ئارقىلىق خەنزۇچە تىل بولىقىنى چۈشۈرۈپ كۆرۈنمە يۈزىنى خەنزۇچە قىلىپ تەڭشىسەك بولىدۇ.
ئاندىن كىين يەنە قىستۇرما بازىرىنى ئېچىپ Live Server دەپ ئىزدەپ بۇ قىستۇرمىنى قاچىلىلايمىز، ئاندىن كود يېزىش بىتىنى ئوڭ چىكىپ چىققان تىزىملىكتىن Open with Live Server بۇيرۇقىنى تاللايمىز، بۇ ھەر ۋاقىت ئاپتۇماتىك يېڭىلىنىپ تۇرىدىغان كىچىك تىپتىكى يەرلىك مۇلازىمىتىر قۇرالايدۇ، ھەم ئاپتۇماتىك سۈكۈتتىكى تور كۆرگۈچكە ئاتلاپ يازغان كودىمىزنىڭ ئۈنىمىنى كۆرەلەيمىز. كىيىن كودنى ئۆزگەرتكەندىن كىيىنمۇ بىۋاستە تور كۆرگۈچكە ئاتلاپلا كودنىڭ ئۈنۈمىنى بىۋاستە كۆرەلەيمىز، ھەر قېتىم بەتنى يېڭىلاشنىڭ ھاجىتى يوق.
ئەسكەرتىش :
VS Code ئارقىلىق كود يېزىشنىڭ تۆۋەندىكىدەك بىر قانچە قائىدىلىرى بار، مەقسەت بولسا ESLint كود دەلىللەش تۈزۈلمىسى بىلەن ماس قەدەمدە مېڭىش :
كودنى تاپشۇرۇش ( ياكى مۇلازىمىتىرغا يوللاش ) دىن بۇرۇن VS Code ئارقىلىق فورماتلاش ( 格式化 ).
Tab كۇنۇپكا چوڭ كىچىكلىكىنى ئىككى بوشلۇق قىلىپ تەڭشەپ، ھەممە مۇھىتتا ئوخشاش ھالەتتە كۆرۈنۈشكە كاپالەتلىك قىلىش كېرەك. تەڭشەش ئۇسۇلى: تەڭشەكنى ئېچىپ Tab Size نىڭ قىممىتىنى 2 گە ئۆزگەرتىپ ساقلاپ، Detect Indentation دىكى تاللاش بەلگىسىنى ئېلىۋەتسەكلا بولىدۇ.
Vetur قىستۇرمىسىنى قاچىلاش، بۇ قىستۇرما Vue كود ئېچىش كېڭەيتىلمىسى ( 开发扩展 ) ۋە Vue ھۆججىتىنى فورماتلاش ئىقتىدارىنى تەمىنلەيدۇ.
Prettier-Code formatter قىستۇرمىسىنى قاچىلاش، بۇ قىستۇرما css، js، Less قاتارلىق باشقا تىللارنى فورماتلاشقا ئىشلىتىلىدۇ، Vetur قىستۇرمىسىمۇ مۇشۇ قىستۇرمىغا تايىنىدۇ، شۇڭا پۈتۈن كودلارنىڭ بىردەك بولىشى ئۈچۈن بۇ قىستۇرمىنى قاچىلايمىز.
ئەسكەرتىش : مەخسۇس بىر دەرىستە Vs Code نى تەڭشەش، ئۇسلۇپ ئۆزگەرتىش، قىستۇرما قاچىلاش قاتارلىقلار بىلەن تونۇشۇپ چىقىمىز، ھەم كۆپ ئىشلىتىلىدىغان، ئۈنۈمنى يۇقۇرى كۆتۈرىدىغان قىستۇرمىلار بىلەن تونۇشۇپ چىقىمىز.
ئاچقۇچىلار كونتىرول تاختىسى
ھازىرقى تور كۆرگۈچلەرنىڭ ھەممىسى JavaScript كونتىرول تاختىسىنى تەمىنلىگەن، بۇ JavaScript كودىنىڭ خاتالىقىنى كۆرۈش، ئۇچۇرلارنى كۆرسۈتۈش قاتارلىق نۇرغۇن ياخشى ئىقتىدارلارنى پىروگراممىرلارغا تەمىنلىگەن، F12 كۇنۇپكىسىنى بېسىش ئارقىلىق كونتىرول تاختىسىنى ئاچقىلى بولىدۇ، بۇيەردە ئەسكەرتىش سېرىق رەڭلىك بەلگىدە، خاتالىق قىزىل رەڭلىك بەلگىدە كۆرۈنىدۇ.
Vue.js نى قاچىلاش
Vue.js نى قاچىلاشنىڭ تۆت خىل ئۇسۇلى بار. يەنى : CDN، NPM، Vue Cli، Vite قاتارلىقلار، NPM، Vue Cli، Vite لار بىلەن 9-بابتا تەپسىلى تونۇشىمىز.
مۇستەقىل نەشرىنى قاچىلاش :
Vue.js ئورگان تورىدىن بىۋاستە چۈشۈرۈپ، HTML بىتىدە <script> خەتكۈچى ئارقىلىق ئەكىرسەك بولىدۇ. تۆۋەندىكىدەك :
<script src="vue.js/vue.global1.3.3.41.js"></script>
ئېچىش باسقۇچىدا Vue.js نىڭ پىرىسلانغان نەشرىنى ئىشلىتىش تەۋىسىيە قىلىنمايدۇ، چۈنكى پىرىسلانغان نەشرىدە ئەسكەرتىش ۋە خاتالىقلارنى كۆرسىتىپ بەرمەيدۇ.
CDN ئارقىلىق قاچىلاش :
CND ھەر جايغا ئورۇنلاشتۇرۇلغان مۇلازىمىتىرلارغا تايىنىدۇ، ئۆزىمىزگە ماس كىلىدىغان، سۈرئىتى تىز، مۇقۇم بولغان بىرەر CDN مۇلازىمەت تەمىنلەش سۇپىسىنى تاللىساق بولىدۇ. بۇمۇ يۇقارقىغا ئوخشاشلا <script> خەتكۈچى ئارقىلىق ئەكىرلىدۇ. تۆۋەندىكىدەك :
<script src="https://unpkg.com/vue@3/dist.vue.global.js"></script>
NPM ئارقىلىق قاچىلاش :
Vue.js ئارقىلىق پىروگرامما تۈرى قۇرغان ۋاقتىمىزدا NPM ئارقىلىق قۇرۇش تەۋىسىيە قىلىنىدۇ. NPM بولسا Node.js نىڭ بوقچا باشقۇرۇش قۇرالى، شۇنداقلا Node.js مەھەللىسىدە قىزغىن ئالقىشقا ئىرىشۋاتقان، ئۈچىنجى تەرەپ بۆلەكلىرىنى ئەڭ كۆپ قوللايدىغان بوقچا باشقۇرۇش قوراللىرىنىڭ بىرى. Node.js مۇھىتىنى قاچىلىغان ۋاقتىمىزدا NPM بوقچا باشقۇرۇش قورالىمۇ قاچىلىنىپ بولغان بولىدۇ.
ئەگەر Node.js نى قاچىلاپ بولغان بولسىڭىز NPM نى قايتا قاچىلىشىڭىزنىڭ ھاجىتى يوق. NPM گە مۇناسىۋەتلىك بىلىملەر 9-بابتا تەپسىلى سۆزلىنىدۇ. NPM ئارقىلىق Vue.js نى قاچىلاش كوماندىسى تۆۋەندىكىدەك :
$ npm install vue@next #ئەڭ يېڭى مۇقۇم نەشىرىنى قاچىلايدۇ
Vue CLi ئارقىلىق قاچىلاش :
ئادەتتە Vue تۈرىنى ئاچقان ۋاقتىمىزدا Vue CLi ئارقلىق جىياۋشوۋجىيا ( 脚手架 ) تۈرىنى قۇرىمىز، بۇ بىزگە ئاپتۇماتىك Vue نىڭ ھەرقايسى بۆلەكلىرىنى ئاپتۇماتىك قاچىلاپ بىرىدۇ، NPM ئارقىلىق Vue نى ئايرىم قاچىلاشنىڭ ھاجىتى يوق.
Vue.js ئىشلەتكۈچىلەرگە ئورگان تەرەپتىن Vue CLi نى تەمىنلىگەن، ئۇ تىز سۈرئەتتە بىر پىروگراممىنى قۇرۇپ چىقالايدۇ، قۇرۇپ چىقىشقا پەقەت نەچچە مىنۇتلا كىتىدۇ. Vue CLi نى ئىشلىتىشتىن بۇرۇن Node.js ۋە مۇناسىۋەتلىك قۇراللارنى ئىشلىتىپ باققان بولىشى تەلەپ قىلىنىدۇ، ئەگەر ئىشلىتىپ باقمىغان بولسا Vue نى بىششىق ئىگگەنلىگەندىن كىيىن ئىشلىتىش تەۋىسىيە قىلىنىدۇ.
1.2.5 ئاچقۇچىلا تور كۆرگۈچ قىستۇرمىسىنى قاچىلاش
vue-devtools بولسا Vue.js كودلىرىنى تەڭشەشكە ئىلشلىتىدىغان تور كۆرگۈچ قىستۇرمىسى، بۇ ئارقىلىق تور كۆرگۈچنىڭ ئاچقۇچىلار قۇرالى ئىچىدە Vue.js كودىنىڭ ئۈنۈمىنى كۆرەلەيدۇ ۋە بىرقىسىم تەڭشەكلەرنى ئېلىپ بارالايدۇ. ئوخشىمىغان تور كۆرگۈچتە بۇ قۇرالنىڭ قاچىلاش ئۇسۇلىمۇ ئوخشاش بولمايدۇ، بىز گوگېل تور كۆرگۈچنى مىسال قىلىمىز.