vue使用vue-cli快速創(chuàng)建工程
本文介紹了vue使用vue-cli快速創(chuàng)建工程，分享給大家，具體如下：
vue-cli安裝
npm i vue-cli -g vue init webpack-simple vue-todos
vue-cli 是一個(gè)官方發(fā)布 vue.js 項(xiàng)目腳手架，使用 vue-cli 可以快速創(chuàng)建 vue 項(xiàng)目。
-g代表全局安裝。
i就是install的縮寫(xiě)。
其中webpack-simple代表模板的名稱(chēng)。vue-todos是你給自己的項(xiàng)目起的名稱(chēng)，這個(gè)隨便起。
配置完成后，可以看到目錄下多出了一個(gè)項(xiàng)目文件夾，里面就是 vue-cli 創(chuàng)建的一個(gè)基于 webpack-simple 的 vue.js 項(xiàng)目。
之后一直回車(chē)，，并切換到vue-todos的目錄
接著執(zhí)行
npm i
之后就可以運(yùn)行了
npm run dev
這時(shí)可以修改上述App.vue的文件。
比如改為
<template>
<div id="app">
<button v-on:click="counter += 1">增加 1</button>
<p>這個(gè)按鈕被點(diǎn)擊了 {{ counter }} 次。</p>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
counter: 0,
}
}
}
</script>
其中export default代表導(dǎo)出。然后在main.js利用import導(dǎo)入
運(yùn)行的話結(jié)果就是
總結(jié)
vue-cli就是一個(gè)根據(jù)模板快速創(chuàng)建工程的工具（命令）啦~。
參考
Vue 爬坑之路（一）—— 使用 vue-cli 搭建項(xiàng)目
JavaScript ES6中export及export default的區(qū)別
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)數(shù)字翻頁(yè)動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)數(shù)字翻頁(yè)動(dòng)畫(huà)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了詳解Vue中組件傳值的多重實(shí)現(xiàn)方式,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-08-08
vue-cli2與vue-cli3在一臺(tái)電腦共存的實(shí)現(xiàn)方法
這篇文章主要介紹了vue-cli2與vue-cli3在一臺(tái)電腦共存的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
關(guān)于vxe-table復(fù)選框翻頁(yè)選中問(wèn)題及解決
這篇文章主要介紹了關(guān)于vxe-table復(fù)選框翻頁(yè)選中問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue3 列表界面數(shù)據(jù)展示，文章主要詳介紹的內(nèi)容就是做的就是把打到頁(yè)面的數(shù)據(jù)，帶樣式，也就是說(shuō)好看點(diǎn)顯示,需要的朋友可以參考一下2021-11-11
vue中將html字符串轉(zhuǎn)換成html后遇到的問(wèn)題小結(jié)
這篇文章主要介紹了vue中將html字符串轉(zhuǎn)換成html后遇到的問(wèn)題小結(jié),本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-12-12
vue實(shí)現(xiàn)websocket客服聊天功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)websocket客服聊天功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
web面試MVC與MVVM區(qū)別及Vue為什么不完全遵守MVVM解答
這篇文章主要介紹了web面試中常問(wèn)問(wèn)題，MVC與MVVM區(qū)別以及Vue為什么不完全遵守MVVM的難點(diǎn)解答，有需要的朋友可以借鑒參考下，希望能夠有所幫助2021-09-09
vue+bpmn.js實(shí)現(xiàn)自定義流程圖的完整代碼
這篇文章主要介紹了vue+bpmn.js實(shí)現(xiàn)自定義流程圖的完整代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借價(jià)值,需要的朋友參考下吧2024-03-03
vue中ref和reactive的區(qū)別及說(shuō)明
這篇文章主要介紹了vue中ref和reactive的區(qū)別及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08