目錄
- 一、在官網下載Vue.js
- 二、使用<script>標簽直接引入本地的vue.js
- 三、使用CDN引入Vue.js
- 四、驗證是否安裝成功
- 五、安裝Vue Devtools瀏覽器除錯插件
- 不同瀏覽器匯入方法
本篇僅以HBuilder X為例，其余開發軟體同樣適用
這里兩種方法，使用<script>標簽直接引入本地的vue.js或使用CDN引入，
一、在官網下載Vue.js
詳見官方檔案
Vue2
Vue3
二、使用<script>標簽直接引入本地的vue.js
首先點擊新建一個專案
填寫專案名稱與路徑，初學者建議選擇普通Vue專案就好(本篇主要講解普通Vue專案)，點擊創建
不要在意body里面的內容，HBuilder X默認引入的是Vue3，而大多數初學者是從Vue2開始學習的
HBuilder X在創建專案時將Vue.js檔案放在了如圖的位置
Vue是一款追求輕量化的框架，官方推出了Vue.js和Vue.min.js兩個版本，Vue.js是開發環境版本，包含完整的警告和除錯模式，而Vue.min.js是面向用戶的生產環境版本，為了輕量化的目的洗掉了所有警告，可以理解為是mini版的Vue.js,我們在開發時選擇Vue.js版本
只需要將上面的<script>標簽中的路徑更改即可
<script src="https://www.cnblogs.com/mieriki/archive/2023/04/04/js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
三、使用CDN引入Vue.js
將以下內容復制到head即可
Vue2
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
Vue3
<script src="https://unpkg.com/vue@next"></script>
四、驗證是否安裝成功
直接運行此專案，打開瀏覽器的控制臺，輸入 Vue 點擊回車，彈出構造方法即為成功（注：Vue2與Vue3的構造方法不同）
第一次運行控制臺會給我們兩條資訊
Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
這是Vue提示我們安裝瀏覽器除錯插件，安裝方式在下文給出
You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
這是Vue提示我們正在開發模式下運行Vue，部署生產時，請確保打開生產模式，
五、安裝Vue Devtools瀏覽器除錯插件
Chrome瀏覽器和edge瀏覽器均可直接在擴展商店中搜索下載
也可以去GitHub上下載(點我)
不同瀏覽器匯入方法
edge：
Chrome：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/549174.html
標籤：其他
上一篇：記錄-一個栗子讓你徹底弄懂CSS3補間影片和逐幀影片
下一篇：深淺拷貝