Vue2.5筆記：如何在項目中使用和配置Vue

最開始的項目開發中，咱們若是使用第三方的庫咱們會直接在項目中直接使用 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 查看咱們的初始化項目

是否是很酷，咱們的第一個項目已經就這樣建立完成，接下來咱們就慢慢的去開始咱們的項目開發吧。加油！