From: https://blog.csdn.net/u012907049/article/details/72764151

版權聲明：本文為博主原創文章，未經博主允許不得轉載。 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单页面网站（一、环境搭建）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。