Vue2.5筆記:如何在專案中使用和配置Vue

六小登登發表於2018-09-25

最開始的專案開發中,我們如果使用第三方的庫我們會直接在專案中直接使用 script 元素標籤引入即可。

<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>

隨著前端的發展我們出現了模組化的開發方式,例如非同步(AMD)、同步(CommonJS)等等。

在我們正式開始 Vue 專案開始的時候,我們現在安裝一個 Vue Devtools 一個官方的 Vue 除錯 chrome 外掛,安裝之後我們在 chrome 的控制檯就可以看到我們建立的 Vue 的物件例項。

Vue-CLI

Vue 給我們提供了上述所有方式的專案引入方式,不但如此,Vue 還給我們提供了一個目前非常流行,非常牛逼的腳手架(Vue CLI )工具,它能在短短的幾分鐘之內就能構建一個完整的單頁面應用 (SPA)專案。其中包含:熱載入、校驗、打包等構建專案等工具;下面我們來一步一步的構件一個新的專案。

安裝工具

//npm
npm install -g @vue/cli

//yarn
yarn global add @vue/cli

安裝完成以後我們驗證下有沒有安裝成功,執行下面命令後如果安裝成功後,會顯示版本號,我安裝的版本是 3.0.4

vue --version

如果你和我一樣恭喜你你安裝成功了,如果沒有安裝成功你可以檢視下許可權的問題或者該用 cnpm 試試。

安裝成功之後,我們執行以下命令就可以建立一個完整的專案案例。

vue create my-project

執行上述命令以後,會讓我們選擇是按照預設(default)的配置,還是選擇執行配置,如果你已經非常熟悉了腳手架工具或者預設的配置你滿足不了你的需求,你可以選擇自己行配置,不過這裡還是建議不太熟悉的同學還是使用預設配置就行。

等待安裝完成之後,我們執行下面命令就可以看到我們的初始化專案了。

cd my-project
npm run serve 

我這裡給的是 8080 埠,我們本地訪問 localhost:8080 檢視我們的初始化專案

是不是很酷,我們的第一個專案已經就這樣建立完成,接下來我們就慢慢的去開始我們的專案開發吧。加油!

相關文章