快捷導(dǎo)航

Vue2.5學(xué)習(xí)筆記之如何在項(xiàng)目中使用和配置Vue

更新時(shí)間：2018年09月26日 08:48:04 作者：Modenng

這篇文章主要介紹了Vue2.5學(xué)習(xí)筆記之如何在項(xiàng)目中使用和配置Vue的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

最開(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)站的支持！

您可能感興趣的文章: