windows下 vue 啟動專案步驟

2021-09-05 12:21:09 字數 1873 閱讀 1151

前後端分離專案,要做前後端聯動測試,沒整過前端用vue, nodejs和webpack的開發管理方式。來回折騰終於把已經建好的vue專案啟動起來,做個筆記記錄下步驟備用,只針對沒有任何前端專案啟動經驗的,可能對別人沒有參考意義:

os:windows7

(1)git clone已建的vue專案(強迫症患者非要寫,廢話)

(2)裝好nodejs,最新版本6.10以上的好像都能自動配置路徑和npm啥的,反正裝好後在任意路徑下用cmd查"node --version"或者"npm -v"都能給出版本號,不用像一些其他教程一樣還要配置環境變數。個人偏好者另說。vue是依賴nodejs的環境的。

(3)切換npm映象:在任意路徑下用cmd輸入「npm install -g cnpm --registry= 這樣就能用**的npm映象代替國外的資源,懶得用**同學的福音。以後就可以用cnpm命令來全部代替npm。不設定**的話,在後續專案的npm install的時候,容易因為超時而失敗。有教程把這條命令的「--registry」寫成只有乙個「-」,注意是兩個「--」。

(4)npm全域性安裝vue:仍舊在任意路徑的cmd下輸入「cnpm install vue-cli -g」,安裝vue。成功後輸入vue能出來資訊。

(5)npm專案依賴元件安裝:cmd進入前端vue專案的根目錄

(6)npm編譯:第一次執行前,要對專案進行編譯,cmd進入前端vue專案的根目錄,輸入命令「npm run build」,此時會對根目錄下的package.json對build命令的定義進行編譯,一般"build" = "webpack -p"。

(7)配置nginx:前後端分離專案一般都要解決跨域問題,上nginx吧,配好nginx安裝目錄/conf/nginx.conf的server模組。nginx的配置不詳述。好像現在nodejs也能直接**,但是如果用windows的同學,好像windows的nodejs不支援process.argv[...],nginx歡迎你回歸(話說nginx在windows下表現也不太穩定,經常好好地專案又不行了,此時不管三七二十一首先重啟nginx!)

(9)配置windows的hosts:由於是在本機上啟用前端專案,需要將127.0.0.1和nginx**後的網域名稱做對應。找到系統的hosts檔案(win7系統下在c:\windows\system32\drivers\etc裡面),增加一條「127.0.0.1 $」。否則本地啟動前端專案後瀏覽器訪問nginx**後的網域名稱會發生dns錯誤。

(10)啟動nginx

(11)啟動專案:cmd進入前端vue專案的根目錄,輸入命令「npm run dev」,此時會用nodejs啟動這個前端的vue專案。大功告成。

乙個比較典型的用webpack管理的vue專案應該有如下檔案和資料夾:

config/:定義**的網域名稱

dist/: 整個前端專案用webpack打包後的目標存放資料夾,裡面一般有bundle.js檔案

lib/: 開發時引用的一些依賴檔案,最經典的就是jquery

node_modules/:上面介紹的用npm對專案依賴元件進行安裝時就放在這個資料夾裡。

src/:自己寫的源**

index.html:主頁入口檔案

package.json和webpack.config.js:這兩個檔案應該是元件依賴關係和管理打包的配置檔案?不太懂,反正沒有是不能cnpm install、cnpm run build、cnpm run dev的。

第一次配置好後,以後啟動只用兩步:

(1)啟動nginx

(2)進入前端專案根目錄,cmd執行npm run dev

Windows下啟動vue專案

2.1設定快取路徑 npm config set cache d nodejs node cache 2.2設定全域性模組存放路徑 npm config set prefix d nodejs node global 如果 需要認證的話可以這樣來設定。有需要建立vue專案的,可以安裝vue cli腳...

windows下vue專案啟動步驟

原創 不是ngnix伺服器是,忽略7 10 前後端分離專案,要做前後端聯動測試,沒整過前端用vue,nodejs和webpack的開發管理方式。來回折騰終於把已經建好的vue專案啟動起來,做個筆記記錄下步驟備用,只針對沒有任何前端專案啟動經驗的,可能對別人沒有參考意義 os windows7 1 g...

Django 啟動專案

同樣,建立django專案也有命令列和在pycharm中建立兩種方式,此處還是以命令列為主 建立專案 進入想要儲存專案的路徑下,輸入django admin startproject web project web project為專案名稱 此時就建立了專案,得到目錄 啟動服務 在專案路徑下輸入py...