從零開始搭建本身的VueJS2.0+ElementUI單頁面網站（1、環境搭建）

原網址：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物理分頁的方法。