Windows下vue的建立 啟動步驟

2021-08-30 10:48:24 字數 1506 閱讀 4349

前後端分離專案,自學vue前端,沒整過前端用vue, nodejs和webpack的開發管理方式。來回折騰終於把已經建好的vue專案啟動起來,做個筆記記錄下步驟備用,只針對沒有任何前端專案啟動經驗的,記錄下自己建立的過程(初次接觸很懵逼!!!):

windows7/10

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

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

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

(4) 建立乙個基於webpack 模板的新專案:vue init webpack new-project(ps:完畢之後,建議先關掉cmd視窗,再操作第5步)

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

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

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

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

dist/: 整個前端專案用webpack打包後的目標存放資料夾,裡面一般有bundle.js檔案(執行 npm run build生成靜態檔案dist)

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

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

src/:自己寫的源**

index.html:主頁入口檔案

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

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

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

windows 下 MongoDB 的安裝與啟動

我的安裝目錄是d mongodb,下面的引數設定以這個為準,你們改為自已對應的即可 我的電腦 右鍵 屬性 高階系統設定 環境變數 使用者變數或系統變數中找到 path 雙擊 在變數值的最後加上 d mongodb bin 別漏了分號,分號用於分隔上乙個變數這兩個資料夾可以建立在任意位置,不一定要在安...

Windows 下 Vue 的安裝

僅介紹 windows 下 vue 的安裝 vue 是一套構建使用者介面的漸進式框架,只關注檢視層,採用自底向上增量開發的設計 1 安裝 node.js 安裝後,開啟 cmd 分別輸入 node v 與 npm v 來檢視是否安裝成功 2 安裝 vue cli 腳手架 全域性安裝配置 npm ins...

windows下python程式開機自啟動

開機自啟動有三種方案 1 把你的python程式隨便放到c盤的乙個目錄下,然後把它的快捷方式放到windows開機自啟動的資料夾 資料夾的位置在開始選單裡有 2 python打包成exe,放到啟動資料夾 3 start.c打包成exe,讓start.c呼叫你的python程式 start.c inc...