Vuetify入門

Vuetify入門

Vuetify是世界上最受歡迎的Vue.js框架，用於構建功能豐富，快速的應用程序。

---

Vue CLI安裝

Vue CLI是下一代cli工具，用於抽象化構建應用程序的複雜性。當您使用Vue CLI啓動應用程序時，無需繁瑣的升級過程

1,查看你本地vue 的版本： vue --version，我本地的是2.9.6.

2,利用命令創建 my-app 應用**：vue create my-app

它提示我這不是最新的版本，至少需要vue-cli 3 以上的纔可以，按照提示安裝最新的vue-cli。

3,卸載舊的vue-cli ，執行命令 npm uninstall -g vue-cli

4,安裝最新的vue-cli,執行命令 npm install -g @vue/cli

5,查看安裝後的版本：vue --version

利用Vue CLI 創建項目

如果尚未使用Vue CLI創建新的Vue.js項目，則可以鍵入以下命令：vue create my-app,我這裏創建的項目名稱叫"ap".


創建成功之後可以看到當前目錄下多了一個項目應用ap；

進入目錄下 cd ap，查看項目文件結構 dir，如下圖：

安裝vuetify插件

1，通過命令安裝，進入到項目目錄下，安裝vuetify插件，vue add vuetify

2，通過ui界面安裝vuetify，執行命令 vue ui

系統會在瀏覽器彈出UI界面，選擇你要安裝的項目ap,導入此項目，再插件界面搜索vuetify插件，發現已經提示“已安裝”，如果沒有安裝的可以通過此方法安裝。

---

導入到Hbuilder開發工具

1,通過Hbuilder導入項目ap;

2,運行項目ap,通過命令 npm run serve

3,在瀏覽器訪問應用首頁。

---