如果您曾經使用過JavaScript庫或框架,那么你一定知道它們通常都會被編譯成原生JavaScript在瀏覽器中運行。但是,vue卻是一個完全不同的東西。它的代碼不需要編譯。這意味著您可以直接將vue引入到您的HTML頁面中,就像使用JQuery一樣。
首先,您需要從Vue.js的官方網站下載Vue.js文件。一旦您下載了文件,并將其解壓縮,您將能夠看到兩個Vue.js的文件:vue.js和vue.min.js。這些文件用于在不同的開發場景中使用VUE代碼。
<!-- 導入開發版的VueJS -->
<script src="./path/to/vue.js"></script>
<!-- 導入生產版的VueJS -->
<script src="./path/to/vue.min.js"></script>
除此之外,您還能夠為Vue.js使用CDN,來直接引用Vue.js:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 或 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
而如果您的應用使用了模塊化的JavaScript,還有其他一些方式導入:
import Vue from 'vue'
// 或者
const Vue = require('vue')
如果您使用一個構建工具(例如webpack),您可以在您的webpack配置文件中簡單地添加Vue.js:
module.exports = {
// ...
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js' // 'vue/dist/vue.esm.js' for webpack 2.x
}
}
}
此時的Vue.js已經成功導入了,您可以使用Vue.js來創建組件、實例化等操作了。如果您是一個正在學習Vue.js的新手,這將是開始您的Vue.js學習之旅的好方法。