Vue2.5學(xué)習(xí)筆記之如何在項(xiàng)目中使用和配置Vue
最開始的項(xiàng)目開發(fā)中，我們?nèi)绻褂玫谌降膸煳覀儠?huì)直接在項(xiàng)目中直接使用 script 元素標(biāo)簽引入即可。
<script src="../xxx.js"></script>
Vue 我們也可以這種引入的方式
<div id="root">{{name}}</div>
<script src="./dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#root',
data: {
name: 'Vue'
}
})
</script>
隨著前端的發(fā)展我們出現(xiàn)了模塊化的開發(fā)方式，例如異步（AMD）、同步（CommonJS）等等。
在我們正式開始 Vue 項(xiàng)目開始的時(shí)候，我們現(xiàn)在安裝一個(gè) Vue Devtools 一個(gè)官方的 Vue 調(diào)試 chrome 插件，安裝之后我們在 chrome 的控制臺(tái)就可以看到我們創(chuàng)建的 Vue 的對(duì)象實(shí)例。
Vue-CLI
Vue 給我們提供了上述所有方式的項(xiàng)目引入方式，不但如此，Vue 還給我們提供了一個(gè)目前非常流行，非常牛逼的腳手架（Vue CLI ）工具，它能在短短的幾分鐘之內(nèi)就能構(gòu)建一個(gè)完整的單頁面應(yīng)用 (SPA)項(xiàng)目。其中包含：熱加載、校驗(yàn)、打包等構(gòu)建項(xiàng)目等工具；下面我們來一步一步的構(gòu)件一個(gè)新的項(xiàng)目。
安裝工具
//npm npm install -g @vue/cli //yarn yarn global add @vue/cli
安裝完成以后我們驗(yàn)證下有沒有安裝成功，執(zhí)行下面命令后如果安裝成功后，會(huì)顯示版本號(hào)，我安裝的版本是 3.0.4
vue --version
如果你和我一樣恭喜你你安裝成功了，如果沒有安裝成功你可以查看下權(quán)限的問題或者該用 cnpm 試試。
安裝成功之后，我們執(zhí)行以下命令就可以創(chuàng)建一個(gè)完整的項(xiàng)目案例。
vue create my-project
執(zhí)行上述命令以后，會(huì)讓我們選擇是按照默認(rèn)（default）的配置，還是選擇執(zhí)行配置，如果你已經(jīng)非常熟悉了腳手架工具或者默認(rèn)的配置你滿足不了你的需求，你可以選擇自己行配置，不過這里還是建議不太熟悉的同學(xué)還是使用默認(rèn)配置就行。
等待安裝完成之后，我們執(zhí)行下面命令就可以看到我們的初始化項(xiàng)目了。
cd my-project npm run serve
我這里給的是 8080 端口，我們本地訪問 localhost:8080 查看我們的初始化項(xiàng)目
總結(jié)
以上所述是小編給大家介紹的Vue2.5學(xué)習(xí)筆記之如何在項(xiàng)目中使用和配置Vue ，希望對(duì)大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了Vue之mixin全局的用法詳解,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
基于elementUI實(shí)現(xiàn)圖片預(yù)覽組件的示例代碼
這篇文章主要介紹了基于elementUI實(shí)現(xiàn)圖片預(yù)覽組件的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Vue+ECharts+高德地圖API實(shí)現(xiàn)天氣預(yù)報(bào)數(shù)據(jù)可視化的教程
所謂數(shù)據(jù)可視化，我們可以理解為從宏觀角度來看一眼就能看出來整個(gè)數(shù)據(jù)的占比，走向，對(duì)于數(shù)據(jù)可視化，很多互聯(lián)網(wǎng)公司是很看重這一塊的，包括大廠，本就將給大家介紹如何通過Vue+ECharts+高德地圖API實(shí)現(xiàn)天氣預(yù)報(bào)數(shù)據(jù)可視化2023-06-06
今天學(xué)習(xí) /deep/ 樣式穿透，因?yàn)関ue3中已經(jīng)使用:deep()取代了/deep/ ，所以直接用:deep()練習(xí)，這篇文章主要介紹了Vue3中樣式滲透:deep()為什么無效,需要的朋友可以參考下2022-11-11
vue項(xiàng)目回到頂部的兩種超簡單實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目回到頂部的兩種超簡單實(shí)現(xiàn)方法,?頁面切換回到頂部是一個(gè)很常見的功能,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
在現(xiàn)代Web開發(fā)中,經(jīng)常需要從其他網(wǎng)頁獲取并解析內(nèi)容,本文將詳細(xì)介紹如何在Vue項(xiàng)目中實(shí)現(xiàn)這一功能,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-03-03
這篇文章主要介紹了Vue中引入json的三種方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
本文主要介紹在Vue中使用debouce防抖函數(shù)，設(shè)置一個(gè)門檻值，表示兩次?Ajax?通信的最小間隔時(shí)間。如果在間隔時(shí)間內(nèi)，發(fā)生新的keydown事件，則不觸發(fā)?Ajax?通信，并且重新開始計(jì)時(shí)。如果過了指定時(shí)間，沒有發(fā)生新的keydown事件再將數(shù)據(jù)發(fā)送出去，這便是debouce防抖函數(shù)2021-12-12
這篇文章主要介紹了Vue雙向數(shù)據(jù)綁定的原理，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-10-10
Vue.js條件渲染和列表渲染以及Vue中key值的內(nèi)部原理
這篇文章主要介紹了Vue.js條件渲染和列表渲染，以及Vue中key值的內(nèi)部原理，文中有詳細(xì)的代碼示例，感興趣的同學(xué)可以參考閱讀2023-04-04