第十二期 · 「正統」前端開發（上）：了解NPM與Vue開發，並結合PyCharm搭建前端開發環境

本篇概述

到現在為止，我們雖然已經初步接觸了Vue這樣的現代前端技術，但還並不知道如何正確的使用編程工具去編寫基於類似技術的前端項目。在本期中，我們將一起更近一步的學習現代前端技術的開發，同時結合我們已經頗為熟悉的PyCharm搭建一個不僅能開發Python項目，還能承擔現代前端技術項目開發的「全棧開發環境」。

前端簡史

早期的前端領域裡，並沒有一門「真正」的程序語言，最早的HTML和CSS等在之前的教程中我有談到過他們並不能算是一門程序語言，因為他們都不存在一門程序語言的標準特性，比如變數、函數、類和對象等等。前端工程師大量的工作其實都耗在調試兼容各種瀏覽器上，也就是讓一個網站的頁面儘可能的在各個瀏覽器下能正常運行之外，還要效果保持一致。

從有互聯網和瀏覽器開始，出於商業戰略目的需要，每一家能獨立開發瀏覽器的軟體廠商，總希望自己的瀏覽器有新穎獨到的特性吸引用戶去使用，並且為了排他和獨佔市場的商業目的，總是積極的註冊商標和技術專利，以增加產品壁壘而不讓他人輕易的複製和使用自己的研發成果，試圖通過這樣的手段獲得市場佔有率和商業先機。

從1993年HTML正式推出開始，此後的十年互聯網技術開始井噴式的蓬勃發展。

HTML正式推出（首次提出是1991年）之後，人們開始意識到通過HTML編寫的網頁毫無美感可言，充其量只是一個將就能看的電子文檔。因為前述商業利益相關的原因，各家的瀏覽器對於同一個網頁的展示效果大相庭徑，因為根據同樣的HTML進行怎樣的展示，是一個瀏覽器的權利。所以整個互聯網圈渴求一個新的技術和統一標準來解決這個問題，這就是1994年CSS被推到前台的背景，而讓人遺憾的是，CSS一直到十年以後才算真正可用。

人性推動技術的發展。在對頁面的美感有所期待後不久，人們開始希望瀏覽器能夠與用戶直接完成一些交互，而不是每一件事情都要經過伺服器去解決和響應，於是1995年JavaScript技術被網景公司在旗下瀏覽器上首次推出。

JavaScript的推出其初衷就是為了解決瀏覽器與用戶的本地交互需求。JavaScript並不是基於Java構建，一開始JavaScript叫過LiveScript，後來網景公司與另一家公司合作，這家公司（就是Java爸爸Sun公司）主推Java，出於商業營銷的需要，才改名為JavaScript。

正如前面所說，大家都有各自的商業目的和如意算盤，誰也不想被誰牽著鼻子走。比如微軟針對IE瀏覽器推出了JScript，因其是基於ECMAScript規範的，所以也稱為ECMAScript。反正就是這個年代各家廠商都不想在技術上落伍，其實該一樣的東西都各自為政整出一套再配以不同的名字。

上面這樣做的後果所造成的傷害，最大就是程序員和消費者。程序員不得不為了更廣泛的適配各種瀏覽器而就同一個功能準備多套適配代碼和額外增加判斷邏輯；同時消費者有時使用一個互聯網產品會被要求必須使用某一款瀏覽器，因而不得不再安裝一個新的瀏覽器客戶端。

而作為互聯網技術發展的中堅力量的程序員們，一直在為此做著諸多的努力。努力在開發效率、商業價值、用戶體驗之間謀求更好的平衡，於是前端領域不斷有推陳出新的技術誕生，有些蓬勃發展，有些則曇花一現。

NPM（node package manager）

在開始搭建Vue的本地開發環境前，我們要先弄清楚NPM這個東西。

一如我們在Python中見到pip（pypi），很多編程語言都有「包管理」的概念，並配以類似pip（pypi）的管理工具。雖然在這其中，有些推出的早和較為完善，有些起步的晚並乏善可陳。

像Python一樣幾乎沒有商業牽扯的程序語言，因為有較為完善的發展機制和明確的維護團隊，一般會由官方出面維護語言的功能擴展庫，並推出相對應的管理機制和作業流程。但像JavaScript這樣的爸爸媽媽是誰都難說的悲劇小子，就沒有如此的幸運而註定要遭受一番磨難了。

可以這麼說，從1995年JavaScript正式推出，一直到谷歌為Chrome瀏覽器開發出驚艷的V8引擎後，JavaScript的新時代才就此到來。

有賴於谷歌開源了V8，到2009年，一個基於V8的JavaScript的程序框架正式推出，這個名為Node.js的框架是一個基於JavaScript的運行時（Run-Time）環境，通俗的講就是這個框架牛逼在讓JavaScript可以脫離瀏覽器運行在伺服器端，這無異於是一次重大的變革，所以Node一經推出就讓人眼前一亮。

大家知道就像Flask一樣，好的技術框架一旦誕生馬上就會眾人拾柴火焰高，Node也不例外。Node一經推出，很快各種擴展就如雨後春筍般出現，甚至有人基於Node寫出了藍牙程序模塊。

為了便於規範的使用和管理各種Node擴展，Node官方推出了對應的包管理工具NPM (Node package manager) 。因為前面說到，Node是基於JavaScript的，因此其推出的包管理工具完全可以用於其他基於JavaScript開發的組件上，所以NPM一經推出也逐漸成為事實上的JavaScript擴展管理工具之一，而不再僅僅為Node服務。

想要使用NPM需要先安裝這個工具到自己的電腦上。NPM的安裝方式很多，一搜能有一堆教程，但其實根本不用那麼麻煩。類似Python的pip，安裝NPM的最佳方式就是安裝Node.js到本地電腦上，方式就是前往Node的官網（[Node.js](Node.js)）下載安裝包，然後運行安裝即可，整個過程不涉及命令行和配置，和安裝一個普通的軟體沒有什麼大的差異。

等待安裝完畢，我們的電腦就能使用NPM了。

初始化Vue項目

首先我們訪問這個頁面：[安裝 — Vue.js](安裝 — Vue.js)

上面這個頁面是Vue有關如何快速初始化一個本地開發環境的說明。在這個說明中，直接用 <script> 引入的方式其實就是前幾期我們講前後端分離時採用的辦法，但今天我們要學習更正統的方式。

現在我們需要的準備知識就是下面這張圖的全部內容。

首先我們進入自己的「學習項目」文件夾，然後打開命令行程序並定位到這個文件夾的根目錄下。以我自己的為例，先進入/Zhihu-Douban，然後打開命令行程序並定位到這個目錄下。

然後按照說明輸入「 npm install --global vue-cli」，按回車。對於蘋果電腦等類Liunx系統，則需要輸入「sudo -i npm install --global vue-cli」，之後輸入管理員密碼才能安裝，這是因為涉及許可權問題。看到類似如下提示，表示安裝成功。

至此，我們安裝好了Vue提供的官方命令行工具 (CLI)。

接著，我們按照文檔說明去利用CLI初始化一個前端項目。首先我們運行「vue init webpack fe」，其中「fe」你可以改為其他任何名字並且不會有什麼特別影響，接著命令行程序會詢問你一些配置的選擇，其中：

1、第一個問題是問你Vue項目的名字，你隨便寫都可以。我寫的是jianmingjiaocheng。

2、緊接著的問題是問你項目的描述和作者郵箱，你按需填寫即可，或者直接按回車鍵用默認值。

3、後續凡是需要輸入的問題，全部直接按回車鍵用默認值。

4、後續凡是需要選擇的問題，全部直接按回車鍵用默認值。

等全部問題確認，稍等片刻後你應該會發現項目根目錄下多了一個名為fe的文件夾，其內容大致如下：

現在你需要讓命令行定位到「fe」文件夾下，一個方式是在剛才的命令行輸入「cd fe」：

然後輸入「npm run dev」：

稍等片刻，你就運行了一個本地的Vue開發伺服器：

就這樣，一個初始化Vue項目的工作就完成了。

配置PyCharm兼容Vue項目的開發

我們的主程還是Python，這樣脫離不開PyCharm。所以如果能用PyCharm開發Vue，而不必因為前端編程的需要去學習使用新的工具，這對我們來說無疑是最大的便利。下面我們來學習一下如何配置PyCharm達到這個要求。

首先我們打開PyCharm的配置頁面。

首先我們要確認一下JavaScript的語言版本設置是「ECMAScript6」，如果不是這個設置，需要調整為這個設置。

然後我們按照下圖指引點擊編輯器右上角的按鈕，開啟調試器管理面板。

我們點擊「+」，新增一個npm調試器配置。

Name隨便輸入，我這裡寫的依舊是「fe」，然後因為PyCharm比較方便，點擊package json輸入框右側的箭頭，通常情況下能自動幫我們找到對應的文件，如果找不到，就在之前建立的前端項目根目錄下找一個名為package.json的文件選中即可。

然後Command一般會自動幫我們填寫「run」，如果沒有自動填寫則輸入這個值即可。最後Scripts里輸入「dev」即可。

這時右上角的菜單中會多出我們剛才添加的新調試器，效果類似下圖：

跟調試Flask類似，我們點擊旁邊的綠色箭頭開始運行調試器，然後會看到下圖的效果。

上面的提示信息和我們之前用命令行方式時運行的是一樣的，我們直接點擊鏈接，可以看到和之前一樣的頁面。

至此，PyCharm也配置好了，我們可以用其方便地編寫Vue的前端程序了。

安裝前端項目擴展

剛才我們初始化的Vue項目其實是一個空項目，還沒有安裝我們所需的擴展包。一個確認需要的擴展就是element-ui，大家應該還記得之前我們是通過網頁引用script的方式使用element-ui的，而現在我們需要把他安裝到我們的項目里，這個過程和Python的pip安裝非常相似。

我們打開element-ui的官方文檔，看到其NPM的安裝命令如下：

大家注意，我們在前端項目里安裝擴展時，都需要讓命令行位於該項目的根目錄文件夾下，比如我這裡是 /fe 下：

根據官方說明，輸入「npm i element-ui -S」，稍等片刻等待擴展安裝完畢：

這樣我們需要的element-ui 也安裝好了。

最後，我們還需要對前端項目做一些自定義設置，這些設置能給我們後續編寫和調試前端項目提供便利，但是在此之前，我們還需要進一步了解有關NPM的一些知識。

開發調試和編譯構建到生產

在正統的開發領域，一般的程序需要經歷開發到測試，測試到預發，預發到生產的幾個步驟，這幾個步驟分別對應幾個環境。所謂環境，就是為了開發調試或者運行程序，所配備的支持程序運行所需的硬體和軟體的集合。一般情況下，環境大體分為：開發環境（DEV）、測試環境（TEST）、預發/預生產環境（UAT）、生產環境（PRO），分別用於程序開發、程序測試、程序測試完準備上線前最後確認、程序發布上線。開發和測試環境一般部署在本地，也就是機器一般在辦公室的機房裡；預發和生產環境則一般部署在外部機房裡，其中生產環境就在用戶訪問我們網站時提供服務的伺服器上。

開發工具一般都提供分別針對開發環境和生產環境的各種支持，特別是對於生產環境，主要的支持就是編譯程序和壓縮程序，主要的目的就是減小程序文件的大小，提高程序的運行速度。

我們剛才已經碰到「npm run dev」這個命令，其中dev就表示開發環境調試，對應的，大家可以嘗試一下「npm run build」，這個表示構建出用於生產環境的程序文件。運行這個命令後，大家可以看到類似下圖的提示，並能在前端項目的 /dist 文件夾下，看到剛構建好的程序文件。

在上圖的命令行提示信息中，主要是向我們展示了一個用於生產環境的全部程序文件的數目和各自的大小。

大家注意提示信息中最後的幾行文字，其意思是剛才構建好的用於生產環境的程序文件，我們不能直接在本地打開。所謂不能直接在本地打開，意思是你直接雙擊「index.html」啥效果也沒有，必須把這些文件放到伺服器上，以瀏覽器訪問網站的方式去訪問這些文件才能看到實際的效果。這其中的原因是因為瀏覽器基於安全性的必要限制，不允許你直接去運行一個本地的JavaScript（.js結尾）的文件，跟之前我們碰到過的「同源策略」問題其原因類似。

說到這裡，我們想到一個事情。在我們編寫和調試Flask程序時，我們知道Flask為了便於我們在本地開發和調試，提供了一個專門的支持讓我們得以開啟一個本地伺服器，以 http://127.0.0.1:5000/ 訪問。嘿，大家想到要幹什麼了吧？！

沒錯，我們可以把Vue構建的生產環境文件放到Flask里進行調試，因為我們最終是通過 http://127.0.0.1:5000/ 去訪問的，這時就是前述中允許的「瀏覽器訪問網站」的方式。

為了更加便利的小小設置

每次Vue構建一堆生產環境的文件，我們就得挪動這些文件放到Flask里，這實在不夠方便，好在我們只需要對Vue稍加配置就能讓這件事情變得更加便利。

首先我們打開 /fe/config/index.js 這個文件：

然後找到這個文件中關於build的配置部分：

先說說我們期望的效果。

我們期望的效果是，一旦我們決定build出生產環境的文件，其中index.html應該能自動更新到我們Flask的項目里 /templates 文件夾下，再有就是對應的靜態文件，什麼樣式表、圖片等等，能自動更新到Flask的項目里的 /static 文件夾下，這兩個地方就是Flask載入前台頁面所需資源的存放位置。

對應上圖build的配置，其實就是修改index和assetsRoot。

因為大家是第一次見到Vue構建出的生產環境文件，所以可能並沒有意識到一個細節，就是我們用於生產環境的程序文件總是只有一個index.html，這跟我們這次Flask只有一個index.html沒有任何關係。後面無論我們有多少個前端頁面，按照Vue的默認配置去編譯構建出生產環境所需的程序文件，總是只有一個index.html，大家有興趣可以自行搜索相關知識去了解下原因。

現在，請大家務必注意，考慮到一會我們要嘗試一把修改後的效果，而這個嘗試會導致當前Vue項目的文件去覆蓋掉之前Flask里的文件，而我們還沒開始在Vue里寫好之前的前端頁面呢，所以我們需要先拷貝出老的文件到別的地方，一會再復原。

我們先看修改後的配置，如下圖：

然後我們把老的文件挪動到別的地方暫存：

運行一下「npm run build」：

我們發現原Flask項目里的靜態資源全部都被替換了。為了進一步確認，我們運行一下Flask的調試伺服器，然後訪問一下頁面，可以發現之前豆瓣的影視劇查詢全沒了，取而代之的是之前見過的Vue默認項目頁面，這剛好就是現在Vue默認程序的效果。

好了，到此為止，我們為下面開始「正統」的前端編程已經準備妥當，現在最後的工作當然是恢復原有的靜態文件，咱們可指著這些文件重構前端呢，別告訴我——你——沒——備——份……