Vue CLI хэрэгслэээр үүсгэсэн төслийн эхлэлийн цэг бол
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')кодийг агуулсан main.js файл юм. npm run serve командаар ачааллагдах боловсруулалтын сервер хандан ажиллах public хавтас доторх index.html файлд
<body>
<noscript>
<strong>We're sorry but vue-lesson doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body><noscript> тегд JavaScript -ийг нээхгүй бол програм ажиллахгүй гэсэн анхааруулга гаргах хэсэг дараа нь app айдитай div элемент л байгаа. div -ийн араас багцлагдсан файлуудыг автоматаар оруулна гэсэн тайлбар бий. Хэрвээ та хөтөчийн тохиргоонд JavaScript код ажлуулахыг хаавал програм ажиллахгүй.
Vue CLI хэрэгслээр үүсгэсэн төслийн эхлэлийн цэг main.js файлд Vue -гийн шинэ хувийг өмнөх хичээлүүдэд сурсан аргаас арай өөрөөр үүсгэж байгаа. Өмнө нь бид Vue -гийн хувийн тохиргооны обьектод el: '#app' гэж хувийг холбох тегийн Id -г заадаг байсан. Vue 3.0 -аас дээшхи хувилбарт main.js файлд Vue -гийн шинэ хувийг үүсгэхдээ тохиргооны обьектын render талбарт App компонентыг виртуал DOM -д html код болгон хувиргах функцийг тодорхойлоод дараа нь mount аргад app айдитай div элементэд холбон өгнө гэдгийг параметрээр өгдөг болсон. Төслийн эхлэлийн цэг main.js файлыг өмнөх хичээлүүдэд сурсантай төстэй байдлаар
import Vue from 'vue'
import App from './App.vue'
Vue.use(VueResource)
new Vue({
el: '#app',
render: h => h(App),
})гэж өөрчилье. Төслийг ажлуулбал бүгд хэвийн ажиллана. el: '#app' мөрийг өмнөх хичээлүүдээс мэднэ. Түүний дараагийн render талбарын тодорхойлолт бол шинэ зүйл. Хэрвээ та EMCA6 -гийн сумаар тодорхойлогдох функцийн бичлэгийг мэддэг бол render талбарыг параметрээр функц авдаг функцээр тодорхойлсон гэдгийг төвөггүй ойлгоно. Үүнийг арай ойлгомжтой болгох үүднээс EMCA5 -ын дүрмээр
import Vue from 'vue'
import App from './App.vue'
Vue.use(VueResource)
new Vue({
el: '#app',
render: function(h) {
return h(App)
},
})гэж бичээд төслийг ажлуулбал бүгд хэвийн ажиллана. render талбарыг параметрээр h функцийг аваад түүнийг ажиллуулахдаа main.js файлд импортолсон App компонентийг дамжуулсан функц байдлаар тодорхойлсон. Ингэснээр webpack сан App компонентийн script тегд тодорхойлогдсон обьект болон template тегд тодорхойлогдсон хэвүүдээр html кодыг үүсгэнэ. Үүний дараа index.html файлын app айдитай div -ийн оронд функцээс буцаасан html -ийг оруулан өгөөд төслийг эхлүүлнэ. Үүнийг EMCA6 -д илүү хураангуйлан render: h => h(App) гэж бичдэг.
