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

前言

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> 

然后點擊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

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

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

點擊回車。

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

npm install vue-router --save

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

工程打包運行

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

npm run dev

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

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

這里的配置信息寫的很清楚，本地的服務器端口為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物理分頁的方法。

版權聲明：本文為博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/u012907049/article/details/72764151