公司前端主要開發技術棧轉為了vuejs,包括APP、H5/公眾號、PC都采用了前后分離的開發方式,在這里寫一下vuejs應用開發的環境搭建。
要安裝的軟件或環境主要有:nodejs、vue-cli、webpack、以及其它的可能用到的UI框架和第三方庫。
- nodejs/npm
- 簡介
nodejs是一個基于google chrome V8(有點類似于JAVA的虛擬機)引擎的javascript 運行環境,是一個輕量級的、基于事件驅動、非阻塞的I/O模型的開發工具,可用于服務端應用的開發,已有相當多的第三方庫可使用。
npm是nodejs package manage 的縮寫,專門用來管理基于nodejs生態系統的開源框架及工具。 - 安裝
從nodejs 官網下載對應自己電腦系統的安裝包,https://nodejs.org/,nodejs有很多版本,更新也很快。其中有一個LTS版本,這個是長期維護的版本,如果是服務器運行環境(非開發環境)的話,建議下載這個版本;如果是本地開發的話,安裝最新版本就行。本人所采用的是windows安裝包,直接下載msi文件,雙擊就能安裝,和普通的程序安裝沒多大區別,安裝nodejs的同時,也會安裝好npm工具。
安裝完成之后,可通過系統自帶的cmd工具驗證安裝是否成功。
- 簡介
nodejs.png
如果出現以下信息,并且和你之前下載的nodejs版本一致,那恭喜你,就說明安裝成功了。安裝完成之后,由于我天朝偉大的墻的原因,需要將npm的安裝地址改成國內的鏡像,推薦使用taobao的,地址如下:http://registry.npm.taobao.org/,修改鏡像只需要執行命令:
npm config set registry="http://registry.npm.taobao.org"
npm info underscore
如果出現以下類似內容,就說明鏡像切換成功,可以往下操作了。
image.png
- webpack
簡介
Webpack 是一個前端資源加載/打包工具,只需要相對簡單的配置就可以提供前端工程化需要的各種功能,并且已經有很多的第三方插件可供使用,同時還能進行一些自動化的流程。-
安裝
webpack是一個開源工具,所以可以直接用npm 進行管理,具體操作如下:npm install -g webpack -g 代表全局安裝,這樣在任何文件夾中都可以使用webpack這個命令。
- vue-cli
- 簡介
vue-cli是一個由vue官方提供的腳手架工具,用于快速搭建基于vue的一些開發框架。具體詳情可參照vue-命令行工具-CLI; - 安裝
這里借用一下vue官方的安裝步驟,如下
- 簡介
vue-cli.png
執行完npm run dev之后,就可以看到瀏覽器自動打開了,并會顯示一個大的vue的logo。
就說明你的基于vue的開發環境已經搭建完畢了。
具體可參考 http://www.lxweimin.com/p/a6ef923e0fa7