天天看點

Vue.js 安裝

我們可以在 Vue.js 的官網上直接下載下傳 vue.min.js 并用 <b>&lt;script&gt;</b> 标簽引入。

下載下傳 Vue.js

以下推薦國外比較穩定的兩個 CDN,國内還沒發現哪一家比較好,目前還是建議下載下傳到本地。

Staticfile CDN(國内) : https://cdn.staticfile.org/vue/2.2.2/vue.min.js

unpkg:https://unpkg.com/vue/dist/vue.js, 會保持和 npm 釋出的最新的版本一緻。

cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

&lt;div id="app"&gt;

&lt;p&gt;{{ message }}&lt;/p&gt;

&lt;/div&gt;

由于 npm 安裝速度慢,本教程使用了淘寶的鏡像及其指令 cnpm,安裝使用介紹參照:使用淘寶 NPM 鏡像。

npm 版本需要大于 3.0,如果低于此版本需要更新它:

在用 Vue.js 建構大型應用時推薦使用 cnpm 安裝:

Vue.js 提供一個官方指令行工具,可用于快速搭建大型單頁應用。

進入項目,安裝并運作:

成功執行以上指令後通路 http://localhost:8080/,輸出結果如下所示:

Vue.js 安裝
注意:Vue.js 不支援 IE8 及其以下 IE 版本。

打包 Vue 項目使用以下指令:

執行完成後,會在 Vue 項目下生成一個 dist 目錄,一般包含 index.html 檔案及 static 目錄,static 目錄包含了靜态檔案 js、css 以及圖檔目錄 images。

Vue.js 安裝

如果直接輕按兩下 index.html 打開浏覽器,頁面可能是空白了,想要修改下 index.html 檔案中 js、css 路徑即可。

例如我們打開 dist/index.html 檔案看到路徑是絕對路徑:

我們把 js、css 路徑路徑修改為相對路徑:

這樣直接輕按兩下 dist/index.html 檔案就可以在浏覽器中看到效果了。