Ang Vue CLI ay isang karaniwang tooling baseline para sa Vue ecosystem, na nagbibigay ng zero-config na mabilis na prototyping at isang runtime-driven na karanasan sa pag-unlad. Ang `vue-cli-service` ay isang development dependency sa isang Vue CLI project, na nailalarawan bilang isang runtime dependency para sa proyekto. Naka-pack ito sa `@vue/cli-service` at awtomatikong naka-install sa bawat bagong proyekto ng Vue.js.
Upang mabigyan ka ng sunud-sunod na gabay sa kung paano gamitin ang `vue-cli-service`, dadaan kami sa proseso ng paggawa ng simpleng Vue.js application gamit ang Vue CLI.
Una, pag-usapan natin ang pag-install. Kung hindi pa naka-install ang Vue CLI sa iyong makina, magagawa mo ito sa pamamagitan ng pagpapatakbo ng command na ito sa iyong terminal:
npm install -g @vue/cli
Kapag na-install na ang Vue CLI, maaari kang lumikha ng bagong Vue.js application gamit ang command sa ibaba:
vue create my-app
Ang command sa itaas ay gumagawa ng bagong Vue.js application na pinangalanang `my-app`.
Gamit ang Vue-CLI-Service
Ang proyektong `my-app` ay may kasamang `package.json` file. Ang file na ito ay naglalaman ng ilang mga script na gumagamit ng `vue-cli-service`. Halimbawa:
- magpatakbo ng serbisyo
- npm run build
- npm run lint
Talakayin natin ang bawat isa:
magpatakbo ng serbisyo
Ang utos na ito ay nag-compile at nagre-reload ng application para sa pagbuo. Ginagawa ito sa pamamagitan ng pagpapatakbo ng utos na `serve` ng `vue-cli-service`.
"serve": "vue-cli-service serve",
npm run build
Ang utos na ito ay nag-compile at nagpapaliit ng aplikasyon para sa produksyon. Nakakamit ito gamit ang command na `build` ng `vue-cli-service`.
"build": "vue-cli-service build",
;
npm run lint
Ang command na ito ay nagli-lints at nag-aayos ng mga file sa iyong proyekto. Ginagamit nito ang utos na `lint` ng `vue-cli-service`.
"lint": "vue-cli-service lint",
Gamit ang mga command na ito, mahusay mong ginagamit ang `vue-cli-service` para pamahalaan ang iyong proyekto sa Vue.js.
Vue CLI Plugin
Isang kapana-panabik na bahagi ng Vue CLI ang vue-cli-plugins. Ang mga plugin na ito ay madalas na nagdaragdag ng mga pandaigdigang feature sa iyong proyekto, tulad ng built-in na Babel o ESLint. Maaaring baguhin ng mga plugin ang panloob na configuration ng webpack at mag-inject ng mga command sa `vue-cli-service`.
Narito ang isang halimbawa kung paano mag-install at mag-invoke ng isang plugin:
vue add @vue/cli-plugin-babel
Ini-install ng command sa itaas ang babel plugin sa iyong proyekto.
Sa konklusyon, ang Vue CLI at `vue-cli-service` ay makabuluhang nag-o-optimize at nagpapasimple sa proseso ng pag-develop para sa mga application ng Vue.js. Nagbibigay ang mga ito ng matatag na panimulang punto para sa parehong mga baguhan at batikang developer.
