vue 開發系列（一） vue 開發環境搭建

 

概要

目前前端開發技術愈來愈像後臺開發了，有一站式的解決方案。

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模塊，開機屏幕配置等等。