vue起手式

sunshinezhong發表於2018-12-20
Vue

許久未曾更新文章，雖然不是程式設計師但還是忘懷不了擼碼的覺悟.

1.VUE環境搭建

  1. 安裝node.js (專案開發前準備) Node.js官網：https://nodejs.org/en/ 進入Node.js官網，選擇下載並安裝Node.js。安裝過程只需要點選“下一步”即可，非常簡單。 node.js安裝完成後： 驗證Node.js是否安裝好，在windows下，win+r召喚出執行視窗，輸入cmd開啟命令列視窗。(任意路徑的cmd下)輸入node -v即可得到對應的Node.js版本。 npm包管理器是整合在Node.js中了，所以在安裝Node.js的時候就已經自帶了npm。

    2. vue起手式

    注意npm的版本需要在3.0.0以上版本，所以，如果npm的版本小於3.0.0,輸入以下命令更新npm至最新版本。 

      npm -g install npm複製程式碼
  2. 安裝cnpm (專案開發前準備) 安裝完node之後，npm包含的很多依賴包是部署在國外的。 由於資源的限制，安裝npm依賴包的時候經常失敗，建議使用npm的國內映象cnpm 命令列工具代替預設的npm。 npm 國內映象 https://npm.taobao.org/ 在(任意路徑的cmd下)命令列中輸入以下內容等待安裝 

    npm install -g cnpm -registry=https://registry.npm.taobao.org複製程式碼
  3. cnpm全域性安裝vue-cli (若用臨時服務可全域性安裝 live –server,此步省略) 在(任意路徑的cmd下)命令列中執行以下命令然後等待安裝

     cnpm install -g vue-cli 複製程式碼
    安裝完後，檢查是否安裝成功，輸入vue，出現以下提示表示安裝成功。vue起手式
  4. 構建專案 (可直接在磁碟上建立資料夾，在編輯器中直接開啟專案資料夾) 。新建專案 先將vue專案建在f盤的vue-demo資料夾下，再利用命令進入此目錄。在cmd中輸入碟符f:回車即可進入F盤： 輸入命令 cd vuedemo跳到此目錄下：

    5. vue起手式

  5. 初始化一個專案：
     在此目錄下建立一個基於 webpack 模板的新專案,即在cmd中輸入以下命令（若使用live-server則 在新建專案後 npm init,初始化成功後根目錄下多一個 package.json 檔案） 

    vue init webpack my-vue-project複製程式碼
    意思是初始化一個專案，利用的是webpack打包和壓縮，此專案命名為my-vue-project。這樣，my-vue-project資料夾就自動生成剛剛在指定的目錄中，在初始化專案的過程中，需要輸入專案名、描述、作者等。vue起手式


  6. 安裝npm專案依賴 (若用live-server 此步可省略) cmd進入前端vue專案的根目錄（在cmd中，注意需要使用命令先定位到my-vue-project目錄下，定位命令：cmd –> 碟符: -> cd my-vue-project 然後輸入命令cnpm install安裝專案所需的依賴包資源

     cnpm install 複製程式碼
    執行完成後 可以看到my-vue-project資料夾下多了一個node_modules檔案
  7. npm編譯 第一次執行前，要對專案進行編譯，cmd進入前端vue專案的根目錄，輸入命令

    npm run build複製程式碼
    ，此時會對根目錄下的package.json對build命令的定義進行編譯，一般"build" = "webpack -p"。
  8. 執行專案 cmd進入前端vue專案的根目錄，使用命令

    npm run dev複製程式碼
     執行專案，此時會用nodejs啟動這個前端的vue專案 專案執行成功後瀏覽器可以用

    localhost:8080複製程式碼
    開啟呈現以下頁面。注意瀏覽器的版本，低版本的不支援哦。

vue起手式

2.VUE除錯工具vue-devtools的安裝與使用

  1. 在github上下載壓縮包，github下載地址：github.com/vuejs/vue-d…，
  2. 解壓到本地的磁碟 找到檔案vue-devtools/shells/chrome/manifest.json，修改persistent為true。vue起手式
  3. 進入 vue起手式輸入

    npm install複製程式碼
     之後等待下載專案依賴包, 然後目錄下就會多出一個node-modules資料夾，裡面就是專案所依賴的包， 再進行

    npm run build複製程式碼
     npm run build這一步一定不要忘了，沒有執行這一步的話，專案資料夾shells>chrome資料夾裡會少一個src資料夾,如下圖
    vue起手式
    vue起手式
  4. 我們找到谷歌瀏覽器的擴充套件程式功能，勾選開發者模式，然後我們將外掛資料夾裡的shells>chorme資料夾直接拖到頁面中，完成安裝。 （注意：如果我們沒有執行第4部的

    npm run build複製程式碼
    ，在這裡會報錯：無法載入背景指令碼"build/background.js"）
  5. 在外掛的目錄下執行

    npm run dev複製程式碼
    ，這個時候我們的外掛就可以執行了,開啟localhost:8080可以看到外掛已經安裝並執行了。
  6. 我們在開啟本地的其他專案時，就不需要在vue-devtools資料夾下執行

    npm run dev複製程式碼
    了，因為這個外掛已經安裝在瀏覽器中。接下來就愉快的除錯你的vue專案吧。
  7. 以localhost:8080訪問專案時，只需在專案目錄下執行以下程式碼 

    npm run dev win+r > 碟符： > cd 資料夾名稱 > npm run dev複製程式碼
    vue起手式



3.配置nginx(多個vue專案)

  1. 配置nginx：前後端分離專案一般都要解決跨域問題，配好nginx安裝目錄/conf/nginx.conf的server模組
  2. 配置專案主機地址：前端專案裡需要有個config資料夾，裡面要有host.js或者config.js檔案，定義nginx轉域後的主機地址+埠號（也就是nginx.conf裡面server模組的server_name值+listen的埠號）。git專案拉下來沒有的話自己加一個，檔案內容範例下面用${}表示nginx.conf裡面server模組對應的欄位值

    const host = 'http://${server_name}:${listen}/server/';
export {host};複製程式碼
  3. 配置windows的HOSTS：由於是在本機上啟用前端專案，需要將127.0.0.1和nginx代理後的域名做對應。找到系統的HOSTS檔案（win7系統下在C:\Windows\System32\drivers\etc裡面），增加一條“127.0.0.1 ${server_name}”。否則本地啟動前端專案後瀏覽器訪問nginx代理後的域名會發生dns錯誤。
  4. 第一次配置好後，以後啟動只用兩步：

    啟動nginx 
進入前端專案根目錄，cmd執行npm run dev複製程式碼
一個比較典型的用webpack管理的vue專案應該有如下檔案和資料夾：

config/：定義代理的域名dist
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的。複製程式碼

4.開發環境

執行

npm run dev複製程式碼

 webpack配置檔案為：

webpack.dev.conf.js複製程式碼

 瀏覽器自動重新整理：

將webpack.dev.conf.js中的 hot設定為 false複製程式碼


相關文章