原創:
不是ngnix伺服器是,忽略7~10;
前後端分離專案,要做前後端聯動測試,沒整過前端用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能出來資訊。
(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.ar**[...],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 啟動專案步驟
前後端分離專案,要做前後端聯動測試,沒整過前端用vue,nodejs和webpack的開發管理方式。來回折騰終於把已經建好的vue專案啟動起來,做個筆記記錄下步驟備用,只針對沒有任何前端專案啟動經驗的,可能對別人沒有參考意義 os windows7 1 git clone已建的vue專案 強迫症患者...
WINDOWS下 VUE專案環境搭建
1.安裝git 其右鍵git bash here定位比cmd的命令列要準確,接下來的命令都是利用git bash here。2.安裝nodejs 3.安裝全域性的vue cli腳手架,用於幫助搭建所需的模板框架 npm install g vue cli,回車,等待安裝 安裝完後,可以輸入vue,然...