原網址：https://blog.csdn.net/u012907049/article/details/72764151

前言

VueJS可以說是近些年來最火的前端框架之一，越來越多的網站開始使用vuejs作為前端框架，vuejs輕量、簡單的特性使得前端開發變得更加簡易，而基於vuejs的前端組件庫也越來越多。我們今天使用的ElementUI，是餓了麽團隊開發的一款基於vuejs的前端組件庫，也是眾多vuejs組件庫裏面比較優秀的一款。這裏要說一下我們構建網站所需要用到的一些東西：

• NodeJS（npm）
• Webstorm （前端IDE）
• Nginx（後期用來轉發請求到後臺服務器）
• Eclipse（後臺IDE）

正文

安裝nodeJS和npm

由於我們要使用npm這個包管理器，所以要安裝nodeJS。現在版本的nodeJS已經集成了npm，所以我們只需要安裝一次即可。我們訪問nodejs中文網，下載對應自己系統的版本就可以了。這裏我們下載Windows系統的64位zip文件，下載完成後解壓，可以看到裏面有一個node.exe的可執行文件。

我們把當前的目錄加入到系統環境變量的path裏面。然後打開cmd命令行，輸入npm -v，如果出現如下圖的顯示，說明已經安裝正確。

這樣我們以後就可以在硬盤中任何一個位置裏使用npm命令了。

安裝Webstorm

Webstorm是一款專門用於前端開發的IDE，在其最新的版本中已經有了對vuejs的語法支持。我們進入Webstorm的官方網站下載webstorm的最新版本，安裝之後，會提示我們需要激活，我們按下圖中的輸入，點擊activate就可以了。

激活成功之後進入webstorm，此時我們已經可以進行開發了，不過我們首先要把vue component的模版加入到模版庫中，這樣以後我們每次新建一個.vue後綴的文件，都不需要先手動添加一些默認的代碼。點擊左上角File->New->Edit File Templates，在彈出的對話框中點擊左上角的綠色加號，然後按照如圖顯示填寫Name和Extension，

在下方橙色區域的代碼段內填寫

<template>
    <div>
    </div>
</template>
<script type="text/ecmascript-6">
    export default {
        data(){
            return {

            }
        }
    }
</script>
 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

然後點擊apply，再點擊ok即可。現在我們再次點擊左上角File->New，可以看到剛才創建的vue template已經出現了。我們點擊vue template，名稱填寫test，可以看到新創建的文件就是剛才我們創建的模版的樣子，如圖。

我們可以看到這個模版裏面使用的ES6的寫法，而我們當前的IDE默認支持的是ES5，這裏我們點擊左上角File->Settings，然後下圖設置:

然後點擊apply即可。

創建ElementUI工程

目前ES5仍屬於主流寫法，而我們要使用ES6，需要用到babel來將ES6的語法轉換回ES5的寫法，然後用webpack進行打包等等一些列操作。不過我們不需要自己去配置這些東西，如果是普通的vuejs工程，我們可以使用一個叫做vue-cli的腳手架工具生成vuejs工程，而我們現在使用的是vuejs+ElementUI，所以我們可以從ElementUI的官網裏找到通用的項目模版。地址在ElementUI的GitHub，我們只要下載這個工程即可。下載解壓之後，在webstorm中點擊File->Open，打開剛才下載的工程。打開之後可以看到工程結構如下圖：

可以看到裏面已經集成了bable、webpack等插件。不需要我們自己去配置。我們導入這個工程之後，需要做的一件事就是將npm模塊安裝到這個目錄下。我們打開命令行，進入當前工程的根目錄，然後輸入

npm install

• 1

如果安裝速度較慢，可以使用npm依賴包在國內由阿裏雲提供的鏡像，如下所示

npm install --registry=http://registry.npm.taobao.org

• 1

點擊回車。

安裝結束後我們可以看到工程目錄下多了一個node_modules的文件夾，該文件夾就是工程的依賴包所在。以後我們如果想添加依賴包，就可以繼續用上文的指令，例如如果想加入vue-router，那麽需要輸入

npm install vue-router --save

• 1

npm會自動尋找最新版本的依賴包進行安裝。

工程打包運行

安裝好依賴之後，我們可以對工程進行打包和運行。我們仍然是使用命令行，進入當前工程的目錄，並輸入

npm run dev

• 1

這段代碼的意思就是以本地服務器的端口啟動這個工程。關於本地服務器的配置信息，在工程根目錄的webpack.config.js中，我們可以在該文件中看到如下代碼段：

devServer: {
    host: ‘127.0.0.1‘,
    port: 8010,
    proxy: {
      ‘/api/‘: {
        target: ‘http://127.0.0.1:8080‘,
        changeOrigin: true,
        pathRewrite: {
          ‘^/api‘: ‘‘
        }
      }
    },

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

這裏的配置信息寫的很清楚，本地的服務器端口為8010，如果我們想改變端口號或主機名，只要改變這裏對應的字段即可。
我們輸入npm run dev後，會出現一長串信息，最後會出現webpack: Compiled successfully的字樣，代表我們的代碼編譯成功。這時我們打開瀏覽器，輸入localhost:8010，出現如圖所示的網頁，表示我們的第一個Vuejs2.0 ＋ElementUI工程已經成功運行。

點擊圖中的Let’s do it按鈕，可以看到右側有一個提醒消息飄出來，這就是ElementUI中的一個組件。

至此一個簡單的基於VueJs2.0和ElementUI的前端網站的雛形已經完成了，接下來的時間我會慢慢介紹構建單頁面應用的更多方法和細節。

小結

Webstorm對於前端語言的支持非常豐富，在2017.1版本之後也更新了對vuejs語法的高亮顯示的支持。另外，相對於Eclipse等後端IDE，Webstorm不需要在每次寫完代碼後手動保存，所有的保存都是實時進行的。對於需要同時開發前端和後端的工程師來說，這是需要註意的一點，如果習慣了webstorm的實時保存，可能會在修改了後端代碼後忘記保存。
還有一點就是npm run dev是熱加載，我們執行了這條命令後在webstorm裏修改前端代碼，響應的變化就會馬上顯示在前端頁面，這也是很方便的一點。
另外就是關於ES6的問題，ES6是今後的主流，並且自帶模塊化語句import和export，這對於vuejs的組件化開發是非常有幫助的，而組件化開發會很大程度上提高編程和代碼管理的效率。這個系列的文章都會以ES6的寫法進行開發。如果你想了解vuejs和ElementUI在ES5的編程方法，可以看我的另一篇博客
Vue2.0+ElementUI+PageHelper實現的表格分頁
這篇文章裏介紹了ES5寫法下的vue2.0和ElementUI，以及基於它們的前端增刪改查的基本操作和後端pageHelper物理分頁的方法。

從零開始搭建自己的VueJS2.0+ElementUI單頁面網站（一、環境搭建）