現在是:
廣告熱線:  |  設為首頁 | 加入收藏
登陸用戶名:
密碼:
您現在的位置北京足球指数 > 教育 > >正文內容

立博足球指数:啥都學點:Vue之使用Vue UI可視化創建Vue項目

來源: 發布時間:2020-03-31 06:57:03 閱讀:-

使用Vue UI之前,先要了解下 Vue CLI,以下為官方介紹:


北京足球指数 www.zwtnp.com.cn Vue CLI 是一個基于 Vue.js 進行快速開發的完整系統,提供:

  • 通過 @vue/cli 搭建交互式的項目腳手架。
  • 通過 @vue/cli + @vue/cli-service-global 快速開始零配置原型開發。
  • 一個運行時依賴 (@vue/cli-service),該依賴:可升級;基于 webpack 構建,并帶有合理的默認配置;可以通過項目內的配置文件進行配置;可以通過插件進行擴展。
  • 一個豐富的官方插件集合,集成了前端生態中最好的工具。
  • 一套完全圖形化的創建和管理 Vue.js 項目的用戶界面。

Vue CLI 致力于將 Vue 生態中的工具基礎標準化。它確保了各種構建工具能夠基于智能的默認配置即可平穩銜接,這樣你可以專注在撰寫應用上,而不必花好幾天去糾結配置的問題。與此同時,它也為每個工具提供了調整配置的靈活性,無需 eject。


Vue CLI官方地址:https://cli.vuejs.org/zh/

啥都學點:Vue之使用Vue UI可視化創建Vue項目

現在我們來安裝Vue CLI

Vue CLI 系統有3個組件:

  1. CLI (@vue/cli) 是一個全局安裝的 npm 包,提供了終端里的 vue命令??梢鑰燜俅唇ㄒ桓魴孿钅康慕攀旨?/li>
  2. CLI 服務 (@vue/cli-service) 是一個開發環境依賴。
  3. CLI 插件是向你的 Vue 項目提供可選功能的 npm 包。Vue CLI 插件的名字以 @vue/cli-plugin- (內建插件) 或 vue-cli-plugin- (社區插件) 開頭,非常容易使用。

Vue CLI安裝非常簡單,命令窗口輸入:【npm install -g @vue/cli-service-global】


啥都學點:Vue之使用Vue UI可視化創建Vue項目

使用圖形化界面創建項目

命令窗口輸入【vue ui】


啥都學點:Vue之使用Vue UI可視化創建Vue項目

服務啟動后,會打開一個瀏覽器窗口,界面如下:

啥都學點:Vue之使用Vue UI可視化創建Vue項目

如果沒有看到瀏覽器界面,可以打開瀏覽器,輸入命令窗口中顯示的地址://localhost:8000/

其項目管理路徑為://localhost:8000/project/select

選擇一個空目錄,點擊在此創建新項目,如下圖


啥都學點:Vue之使用Vue UI可視化創建Vue項目

創建VUE項目

選擇默認繼續

啥都學點:Vue之使用Vue UI可視化創建Vue項目

項目創建好后,會打開項目管理頁面


啥都學點:Vue之使用Vue UI可視化創建Vue項目

運行項目

打開如下界面,點擊運行

啥都學點:Vue之使用Vue UI可視化創建Vue項目

運行成功后,點擊啟動APP,打開創建的項目

啥都學點:Vue之使用Vue UI可視化創建Vue項目

啟動APP


啥都學點:Vue之使用Vue UI可視化創建Vue項目

第一個樣例界面

打開項目目錄,修改下文件看看


啥都學點:Vue之使用Vue UI可視化創建Vue項目

修改App.vue文件


啥都學點:Vue之使用Vue UI可視化創建Vue項目

瀏覽器查看前端頁面,已經自動刷新了


啥都學點:Vue之使用Vue UI可視化創建Vue項目

(正文已結束)

推薦閱讀:華為手機哪款值得購買

免責聲明及提醒:此文內容為本網所轉載企業宣傳資訊,該相關信息僅為宣傳及傳遞更多信息之目的,不代表本網站觀點,文章真實性請瀏覽者慎重核實!任何投資加盟均有風險,提醒廣大民眾投資需謹慎!

網站簡介 - 聯系我們 - 營銷服務 - 老版地圖 - 版權聲明 - 北京足球指数
Copyright.2002-2019 北京足球指数 版權所有 本網拒絕一切非法行為 歡迎監督舉報 如有錯誤信息 歡迎糾正
{ganrao} yy麻将外挂 高手 论坛 姚记棋牌官方网站苹果版 贵阳微乐麻将下载安 幸运28手机网 山东11选5开奖走势图 双色球开奖结果双 东方61开奖结果查 3699美女麻将2 为什么股票涨基金跌 管家婆马报 吉祥游戏手机版官网 福州麻将教学视频新手 湖南麻将技巧十句口诀 北京快乐8开奖号码 浙江十一选五开奖