概要
目前前端開發技術越來越像后台開發了,有一站式的解決方案。
1.JS包的依賴管理像MAVEN。
2.JS代碼編譯打包。
3.組件式的開發。
vue 是一個前端的一站式的前端解決方案,從項目的初始化,組件的開發,項目編譯都提供了完整的開發工具。
vue 和 angular,react 比較的,個人覺得vue 開發模式有一下幾個特點。
1.入門簡單
2.性能優異
3.文檔豐富
4.現成可用的UI方案也很多。
比如 vue.ydui.org
開發環境搭建
1.創建vue項目
1.node js 生成項目,編譯項目。
2.hbuilder 開發環境
1.下載安裝node js
http://nodejs.cn/download/
2.安裝 VUE CLI
vue cli 是一個腳手架工具,用於生成一個基礎的vue應用。
npm install vue-cli -g
3.新建一個vue 項目
我們創建一個項目名為vmobile 的手機項目。
vue init webpack vmobile
4.安裝vue 項目所需要的依賴包
進入到vmobile 目錄,在命令行下執行命令
npm install --registry=https://registry.npm.taobao.org這個命令 是將項目依賴的js下載到本地,java程序員可以類比maven 更新jar包。
5.將創建的項目跑起來。
在命令行下執行 命令 vue run dev,執行后會自動打開一個瀏覽器,我們就可以看到新創建的項目了。
2.使用hbuilder編輯項目
hbulider 是一個和類似 webstorm 的開發工具。
這個工具的作用:
1.編輯代碼
2.將我們上面創建的程序轉換成手機應用。
3.將手機程序打包成應用程序,我們可以使用hbuilder 提供的 h5+ 提供的JS API 訪問手機硬件。
3.代碼結構
打包運行配置:
紅框部分是生成的 webpack 打包的代碼。
我們需要修改的部分:
編輯 index.js文件
這里可以看到,我們在執行 命令 npm run build 命令時,會將項目進行編譯,這個時編譯后輸出的目錄和首頁根文件路徑。
這里可以看到有一個端口配置,這里配置成8088。
這個端口是 執行 命令 npm run dev 在瀏覽器調試 啟動的端口,在線調試非常方便,程序員很容易進行在線調試,只要修改項目,那么頁面將自動刷新。
大大提高開發效率。
這個代理設置,是客戶端訪問后端數據用的,主要是防止訪問后端數據出現跨域的問題,
像我這個配置的意思是:
代碼訪問數據的時候 訪問 路徑是 http://localhost:8088/jsaas 那么會將請求轉發到 http://localhost:8080/jsaas 這樣就解決了跨域的問題。
包依賴配置:
這個我們可以看package.json 文件。
dependencies :表示開發時需要依賴的js 的版本。
vue : "^2.5.7” ,這個表示當 我們在執行 npm run install 的時候,項目會依賴 版本 大於或等於 2.5.7 的JS.
devDependencies :這個表示我們開發時需要用到的js,意思是比如打包 webpack 需要的版本。
手機打包配置文件:
manifest.json 這個文件是hbuilder 打包項目需要使用到的配置文件,比如需要訪問原生的API模塊,開機屏幕配置等等。