導航:首頁 > 程序命令 > vue啟動命令

vue啟動命令

發布時間:2023-06-05 17:07:48

A. vue項目創建和部署使用

這周花了兩天時間簡單研究了下目前非常流行和應用廣泛的前端js框架 vue ,作為一個基礎的了解。 vue 的作者是國人尤雨溪。官網描述 vue 是一套用於構建用戶界面的漸進式框架,可以自底向上逐層應用,它核心只關注視圖層,易於上手和便於整合。同時,其可以與現代化的工具鏈和各種類庫結合,用以創建復雜的單頁應用。其特點主要有以下幾點:

基於 vue 的流行度,日常項目前端有在使用,遂記錄這篇文章,主要講從環境搭建到使用樣例。在學習中,體驗和完成了一個功能稍微豐富的例子,為簡潔起見,本期只展示官方默認例子。鑒於本地也沒搜清有nodeJs環境,所以直接從環境搭建開始。

配置淘寶源,注意 -g 是全局安裝

完成之後將使用 cnpm 替換 npm ,驗證 cnpm :

之後的依賴安裝就可以使用 cnpm install <package> 或簡寫 cnpm i <package> 進行。沒有代理的情況下,相比npm國內要快很多,也不容易失敗。注意可以使用 -g -D --save 等參數設置安裝范圍。

安裝 vue-cli
vue-cli 是官方提供的項目腳手架(可以看做類似服務端開發的maven用於構建的部分),用來進行項目構建等操作,後面我們會繼續介紹。它還提供了一個圖形界面,用來執行和進行相關配置,對於新手等只關心結果的人,減少了很多的學習成本。
安裝命令

驗證安裝

之後我們看到一個 hello-world 的文件夾,里邊包括默認生成的一些配置和 App.vue , main.js 等程序文件,如下鎮漏辯是支持 vue-router 路由 (控制頁面切換等操作) 的一個 main.js 具體內容

注意使用路由時,不要忘記在主模板里添加 <router-view>御缺</router-view> 標簽,表示路由切換的位置,否則路由頁面無法正常展示。

先保持默認的demo內容不變,運行如下命令啟動一個本地服務來運行

之後會啟動對應的服務,通過地址和埠訪問,就能看到默認的頁面。

既然提到了部署,默認的部署使用 npm/cnpm 進行,如下命令,輸出內容在 /dist 目錄。

可以使用參數來設置,得到符合不同需要的編譯結果。之後即可以將打包的文件部署到伺服器上。

這里說下 vue-cli 腳手架所帶的圖形界面編譯打包管理,可使用如下命令開啟,然後按照提示,加入需要的項目,可以查看儀表盤展示,進行插件管理,依賴管理,編譯配置,以及項目構建的操作,十分方便。

啟動 vue-cli 圖形界面

然後按照提示訪問即可。

以上就是本期的內容,主要是一些初期的准備工作。目前整體了解了vue相關,如渲染,組件化,路由等。總體來說依託 vue 提供的豐富文檔和比較好用的工具,以及本身非常高的流行度,在嘗試稍微復雜的功能或者遇到問題時,容易找到相關滿意的解決方式,總體來說還是比較適合入門的。後續看時間能多熟悉些實際項目,真正用於搭配後端做個可用的項目。

1. Vue.js介紹
2. Vue CLi腳手架

B. Vue項目啟動過程以及配置

我們點擊 npm run dev 的時候,這就是啟動 Vue 工程項目,那麼它啟動過程是什麼樣的呢? Vue 項目啟動過程,本文簡要介紹皮寬。

在執行 npm run dev 的時候,會在當前目錄中尋找 package.json 文件,燃敏亮包含項目拿鄭的 名稱版本 、 項目依賴 等相關信息。

從下圖中可以看到, 啟動 npm run dev 命令後,會載入 build/webpack.dev.conf.js 配置並啟動 webpack-dev-server 。

webpack.dev.conf.js 中引入了很多模塊的內容,其中就包括 config 目錄下伺服器環境的配置文件。

可以看到,在 index.js 文件中包含伺服器 host 和 port 以及入口文件的相關配置,默認啟動埠是 8080 ,這里可以進行修改。

index.html 的內容很簡單,主要是提供一個 div 給 vue 掛載。

main.js 中, 引入了 vue 、 App 和 router 模塊, 創建了一個 Vue 對象,並把 App.vue 模板的內容掛載到 index.html 的 id 為 app 的 div 標簽下, 並綁定了一個路由配置。

上面 main.js 把 App.vue 模板的內容,放置在了 index.html 的 div 標簽下面。查看 App.vue 的內容我們看到,這個頁面的內容由一個 logo 和一個待放置內容的 router-view , router-view 的內容將由 router 配置決定。

查看 route 目錄下的 index.js ,我們發現這里配置了一個路由, 在訪問路徑 / 的時候, 會把 HelloWorld 模板的內容放置到上面的 router-view 中。

HelloWorld 中主要是一些 Vue 介紹顯示內容。

所以,頁面關系組成是 index.html 包含 App.vue,App.vue 包含 HelloWorld.vue 。

到這,我們開始安裝 router 、 vuex 。
Ctrl+C 退出啟動,繼續執行 vue-cli ,腳手架安裝插件 router 和 vuex 開始。

輸入一個大寫Y,按下Enter

vuex 是專門為 Vue.js 設計的狀態管理庫,以利用 Vue.js 的細粒度數據響應機制來進行高效的狀態更新。

Vuex 主要有五部分:

安裝 vuex

接下來我們在 src目錄 下創建一個 vuex 文件夾
並在 vuex文件夾 下創建一個 store.js 文件
文件夾目錄 長得是這個樣子

在保證我們處於我們項目下,在命令行輸入下面命令,然後,安裝 vuex 。

vuex 的關系圖

開始使用,在 mian.js 中,引入 vuex

④然後告知 vue 開始使用 vuex (Vue.use(Vuex))
在 store.js 文件中,引入 vuex 並且使用 vuex ,這里注意我的變數名是大寫 Vue 和 Vuex

⑤接下來,在main.js中引入store

到這里算是,以及完成了。

我們再重新看一下此時的項目結構,多了router.js和store.js,其它相關的文件也被修改

C. vue項目怎麼在原來的項目上打開

在vscode里新打開一個命襪襲令行終端,在終端窗口裡使用vue對應的腳手架命令啟動項目即可。
1、用本地git客戶端將vue項目從github克隆到本地,用vscode打開,完成編輯。
2、在vscode里新打豎燃開一個命令行終端,在終端窗口裡使用vue對應的腳手架命令啟動項目。余好虛

閱讀全文

與vue啟動命令相關的資料

熱點內容
php程序員月薪 瀏覽:969
安卓最貴的平板是什麼 瀏覽:160
首尾和為9的數乘以12速演算法 瀏覽:477
tkip和aes哪個加密好 瀏覽:315
編譯是基礎嗎 瀏覽:251
電影 什麼徒 瀏覽:666
安卓的頭子分別是什麼 瀏覽:366
趕屍艷談之類的電影 瀏覽:624
為什麼appstore支付出錯 瀏覽:543
androidisodep 瀏覽:755
用什麼app修改圖庫里的照片兒 瀏覽:304
電腦網站看片 瀏覽:466
小電影網站有哪個 瀏覽:770
說手pdf 瀏覽:11
成龍找女兒電影名字 瀏覽:555
填充物聲音解壓 瀏覽:723
機械繫統動力學pdf 瀏覽:393
程序員硬碟多少合適 瀏覽:995
安卓車機怎麼樣升級 瀏覽:947
寫搶購腳本用什麼伺服器 瀏覽:385