Vue建立SPA那些事

時間 2019-11-20

標籤 vue 建立 spa 那些简体版

原文原文鏈接

如上圖所示，建立一個基於webpack模板的新項目。javascript

在命令行輸入：vue init webpack projectName。html

而後就按步驟輸入一些信息，好比項目名、項目描述、配置文件之類。vue

項目名先隨便起一個，我想試試看，我建立項目成功後，更改項目名會不會像用VS建立MVC項目那樣有影響(果真會有影響！)。java

完成後生成這樣的目錄結構：node

目錄解析

目錄/文件	說明
build	最終發佈的代碼存放位置。
config	配置目錄，包括端口號等。咱們初學可使用默認的。
node_modules	npm 加載的項目依賴模塊
src	這裏是咱們要開發的目錄，基本上要作的事情都在這個目錄裏。裏面包含了幾個目錄及文件：webpack assets: 放置一些圖片，如logo等。 components: 目錄裏面放了一個組件文件，能夠不用。 App.vue: 項目入口文件，咱們也能夠直接將組件寫這裏，而不使用 components 目錄。 main.js: 項目的核心文件。
static	靜態資源目錄，如圖片、字體等。
test	初始測試目錄，可刪除
.xxxx文件	這些是一些配置文件，包括語法配置，git配置等。
index.html	首頁入口文件，你能夠添加一些 meta 信息或同統計代碼啥的。
package.json	項目配置文件。
README.md	項目的說明文檔，markdown 格式

再安裝依賴：node_modulesgit

CMD進入該項目文件夾，輸入 npm install。第一張圖實際已經給好了提示，To get started，有三件事要作：web

cd 項目名 - 進入項目文件夾vue-router

npm install - 在這裏等了大概...分鐘（掛了。考慮用淘寶鏡像。後記：麻蛋的，沒事別用cnpm，各類坑。後面產生了一堆問題。把這個smart鏡像卸載了，use方法找不到的問題解決。）npm

npm run dev - 測試環境是否搭建成功

用淘寶鏡像 cnpm，也有一些坑：

http://www.uedbox.com/npm-install-slow-solution/

安裝：npm install --global smart-npm --registry=https://registry.npm.taobao.org/

卸載：    
npm smart uninstall   # 2.x.x 版本的 smart-npm 在卸載前須要先執行此腳本
npm uninstall --global smart-npm

Mac 或者 Linux 用戶可使用下面命令恢復以前備份的 npm：

mv $(which npm-original) $(dirname $(which npm-original))/npm

安裝完成後，發現依舊使用 npm run dev 命令來運行環境：

發現地址欄後面有個 # 號。待研究。

https://router.vuejs.org/zh-cn/essentials/history-mode.html

babel：（根據實際狀況，考慮兼容問題，可不裝） 具體看這個文章：http://2ality.com/2017/02/babel-preset-env.html

這個是用來自動轉換ES6到ES5的。用WebStorm自帶的File Watcher功能+Babel實現自動轉換ECMAScript 6代碼爲ES5代碼。

在node_modules 下找不到babel.cmd文件。

如圖，標記2的地方，這裏選擇當前項目下 - node_modules - .bin - babel.cmd

能夠全局安裝babel。可是最好別這樣，由於這樣項目就對全局的環境產生了依賴，當換到別的環境時，可能就會出問題。並且這樣也不能根據不一樣的項目選擇不一樣的版本。

安裝本地項目的babel: CMD: npm install --save-dev babel-cli

裝完後，更改package.json：

本來的scripts： "build": "node build/build.js",

更改後的：
"scripts": { "build": "babel src -d lib" },

這樣改了之後 npm run build 打包的方式會變成這樣：可能不是本身須要的

安裝Babel的preset以正確識別ES6代碼：

npm install --save-dev babel-preset-es2015

webstorm - File watcher - program：

$FilePathRelativeToProjectRoot$ --out-dir dist --source-maps --presets env

改爲：

$FilePathRelativeToProjectRoot$ --out-dir dist --source-maps --presets=es2015

轉碼的時候，就執行下面的命令： npm run build

------------------------------

vue-resource 能夠基於全局的Vue對象使用http，也能夠基於某個Vue實例使用http。

安裝vue-resource：npm install vue-resource --save

用法：

// 基於全局Vue對象使用http
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
 
// 在一個Vue實例內使用$http
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

在發送請求後，使用then方法來處理響應結果，then方法有兩個參數，第一個參數是響應成功時的回調函數，第二個參數是響應失敗時的回調函數。

then方法的回調函數的兩種寫法：

// 傳統寫法
this.$http.get('/someUrl', [options]).then(function(response){
  // 響應成功回調
}, function(response){
  // 響應錯誤回調
});
 
 
// Lambda寫法
this.$http.get('/someUrl', [options]).then((response) => {
  // 響應成功回調
}, (response) => {
  // 響應錯誤回調
});

安裝完成後，能夠看到package.json文件下，依賴變成了這樣：

  "dependencies": {
    "vue": "^2.5.2",
    "vue-resource": "^1.3.4",
    "vue-router": "^3.0.1"
  },

有時候好奇怪，爲何我建立一個項目，會遇到這麼多問題。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'    找不到這個module。@是vue模板設置的別名。

把npm smart 鏡像卸載，從新在這個項目文件夾下運行 npm install，這個問題解決。

還有以下問題：

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents): （可忽略，fsevents是MAC OSX 系統的。npm install --no-optional 執行這個忽視）
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) （可忽略，同上）
npm WARN karma-sinon-chai@1.3.2 requires a peer of sinon@^2.1.0 but none was installed.

不匹配的依賴： sinon@4.0.2 嗯，要從新下個sinon@2.1.0版本的。然而裝完後，後面提示 invalid，哎先無論。