Vue 是一個使用非常豐富的開源 JavaScript 框架，但是在使用時所需要的第三方庫和插件并不一定全部都在 npm 上，有些需要從其他地方引入才能使用。下面將介紹如何在 Vue 項目中引入非 npm 的庫和插件。
首先，在 Vue 中引入非 npm 庫的方式有兩種：在 HTML 頁面中直接引入和使用 module 的方式。對于一些已經在公共 CDN 上托管的庫或者一些不需要打包在項目中的第三方庫，我們可以使用 HTML 文件來引入。
<!DOCTYPE html>
<html>
<head>
<title>Vue CDN</title>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>
</head>
<body>
<div id="app"></div>
<script>
const app = Vue.createApp({
data() {
return {
message: "Hello Vue!"
}
},
mounted() {
axios.get("https://jsonplaceholder.typicode.com/todos/1")
.then(response => console.log(response.data))
}
})
app.mount("#app")
</script>
</body>
</html>以上代碼展示了在 HTML 頁面中引入 Vue 和 axios，并在 Vue 中使用 axios 發送請求的過程。使用這個方式需要在 HTML 頁面中先引入相關的庫，再引入 Vue 的腳本，然后在腳本中使用相關的庫。
另外一種引入方式是使用 module 的方式，在 Vue 腳本代碼中直接引入。通常這種方式適用于需要打包進項目中并在 Vue 應用中使用的第三方庫。
以引入 lodash 為例：
import lodash from 'lodash';
export default {
data() {
return {
numberArray: [1, 2, 3, 4, 5]
}
},
methods: {
getSum() {
const sum = lodash.sum(this.numberArray);
console.log(sum);
}
}
}上述代碼中，我們在 Vue 的腳本代碼中引入了 lodash，并在 methods 中使用了其中的 sum 方法對數組進行求和。使用 module 的方式需要在 Vue 項目中安裝對應的庫，可以使用 npm 或 yarn 安裝。安裝完畢后，在需要使用該庫的地方引入即可。
總的來說，引入 Vue 中的非 npm 庫和插件需要分情況討論，如果是已經在公共 CDN 上托管的庫或者一些不需要打包在項目中的第三方庫，我們可以使用 HTML 文件來引入；如果是需要打包進項目中并在 Vue 應用中使用的第三方庫，則需要使用 module 的方式，在 Vue 腳本代碼中直接引入。
下一篇vue的is用法