Vue2.5學(xué)習(xí)筆記之如何在項(xiàng)目中使用和配置Vue
最開(kāi)始的項(xiàng)目開(kāi)發(fā)中,我們?nèi)绻褂玫谌降膸?kù)我們會(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)了模塊化的開(kāi)發(fā)方式,例如異步(AMD)、同步(CommonJS)等等。
在我們正式開(kāi)始 Vue 項(xiàng)目開(kāi)始的時(shí)候,我們現(xiàn)在安裝一個(gè) Vue Devtools 一個(gè)官方的 Vue 調(diào)試 chrome 插件,安裝之后我們?cè)?chrome 的控制臺(tái)就可以看到我們創(chuàng)建的 Vue 的對(duì)象實(shí)例。
Vue-CLI
Vue 給我們提供了上述所有方式的項(xiàng)目引入方式,不但如此,Vue 還給我們提供了一個(gè)目前非常流行,非常牛逼的腳手架(Vue CLI )工具,它能在短短的幾分鐘之內(nèi)就能構(gòu)建一個(gè)完整的單頁(yè)面應(yīng)用 (SPA)項(xiàng)目。其中包含:熱加載、校驗(yàn)、打包等構(gòu)建項(xiàng)目等工具;下面我們來(lái)一步一步的構(gòu)件一個(gè)新的項(xiàng)目。
安裝工具
//npm npm install -g @vue/cli //yarn yarn global add @vue/cli
安裝完成以后我們驗(yàn)證下有沒(méi)有安裝成功,執(zhí)行下面命令后如果安裝成功后,會(huì)顯示版本號(hào),我安裝的版本是 3.0.4
vue --version
如果你和我一樣恭喜你你安裝成功了,如果沒(méi)有安裝成功你可以查看下權(quán)限的問(wèn)題或者該用 cnpm 試試。
安裝成功之后,我們執(zhí)行以下命令就可以創(chuàng)建一個(gè)完整的項(xiàng)目案例。
vue create my-project
執(zhí)行上述命令以后,會(huì)讓我們選擇是按照默認(rèn)(default)的配置,還是選擇執(zhí)行配置,如果你已經(jīng)非常熟悉了腳手架工具或者默認(rèn)的配置你滿足不了你的需求,你可以選擇自己行配置,不過(guò)這里還是建議不太熟悉的同學(xué)還是使用默認(rèn)配置就行。
等待安裝完成之后,我們執(zhí)行下面命令就可以看到我們的初始化項(xiàng)目了。
cd my-project npm run serve
我這里給的是 8080 端口,我們本地訪問(wèn) localhost:8080 查看我們的初始化項(xiàng)目
總結(jié)
以上所述是小編給大家介紹的Vue2.5學(xué)習(xí)筆記之如何在項(xiàng)目中使用和配置Vue ,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
Vue 父子組件的數(shù)據(jù)傳遞、修改和更新方法
下面小編就為大家分享一篇Vue 父子組件的數(shù)據(jù)傳遞、修改和更新方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03vue3+vite項(xiàng)目中顯示SVG圖片的實(shí)現(xiàn)
vite-plugin-svg-icons是一個(gè)Vite插件,其作用是將SVG圖標(biāo)文件轉(zhuǎn)換為Vue組件,本文主要介紹了vue3+vite項(xiàng)目中顯示SVG圖片的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下2024-02-02Tree 組件搜索過(guò)濾功能實(shí)現(xiàn)干貨
這篇文章主要為大家介紹了 Tree組件搜索過(guò)濾功能實(shí)現(xiàn)干貨詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07vue彈窗組件的使用(傳值),以及彈窗只能觸發(fā)一次的問(wèn)題
這篇文章主要介紹了vue彈窗組件的使用(傳值),以及彈窗只能觸發(fā)一次的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05vue3中輕松實(shí)現(xiàn)switch功能組件的全過(guò)程
這篇文章主要給大家介紹了關(guān)于vue3中輕松實(shí)現(xiàn)switch功能組件的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01Vue路由實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的示例代碼
根據(jù)登錄的角色不一樣,實(shí)現(xiàn)不同的路由展示,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-04-04Vue+Element UI實(shí)現(xiàn)概要小彈窗的全過(guò)程
彈窗效果是我們?nèi)粘i_(kāi)發(fā)中經(jīng)常遇到的一個(gè)功能,下面這篇文章主要給大家介紹了關(guān)于Vue+Element UI實(shí)現(xiàn)概要小彈窗的相關(guān)資料,需要的朋友可以參考下2021-05-05