VueJS可以說是近些年來最火的前端框架之一，越來越多的網(wǎng)站開始使用vue作為前端框架，vuejs輕量、簡單，對于前端友好，學習路線平坦，這使得前端開發(fā)變得更加簡易，而基于vuejs的前端組件庫也越來越多。其中ElementUI，就是餓了么團隊開發(fā)的一款基于vue的前端組件庫。構(gòu)建網(wǎng)站的必備環(huán)境：

創(chuàng)新互聯(lián)建站服務項目包括托克托網(wǎng)站建設、托克托網(wǎng)站制作、托克托網(wǎng)頁制作以及托克托網(wǎng)絡營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，托克托網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務的客戶以成都為中心已經(jīng)輻射到托克托省份的部分城市，未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任！

NodeJS（npm）Webstorm （前端IDE）Nginx（后期用來轉(zhuǎn)發(fā)請求到后臺服務器）

由于我們需要使用npm的包管理器，所以首先得先安裝nodejs,  直接在node官網(wǎng)下載

windows系統(tǒng)直接下載  .msi。下載完畢直接雙擊安裝就ok啦

安裝完畢，打開cmd 輸入命令 npm -v 查看是否安裝成功以及版本

打開webstorm，點擊左上角File->New->Edit File Templates，在彈出的對話框中點擊左上角的綠色加號，然后按照如圖顯示填寫Name和Extension，

在下方橙色區(qū)域的代碼段內(nèi)填寫

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

然后再設置編輯器的為ES6語法 如圖

創(chuàng)建ElementUI工程

① 使用 git 命令git clone https://github.com/ElementUI/element-starter.git下載官方提供的模板， 
② 使用cnpm intsall下載依賴的模塊（沒有淘寶鏡像 cnpm 可以使用npm install） 
③ 使用npm run dev運行項目

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

npm install

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

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

點擊回車。

安裝結(jié)束后我們可以看到工程目錄下多了一個node_modules的文件夾，該文件夾就是工程的依賴包所在。以后我們?nèi)绻胩砑右蕾嚢?，就可以繼續(xù)用上文的指令，例如如果想加入vue-router，那么需要輸入

npm install vue-router --save

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

工程打包運行

安裝好依賴之后，我們可以對工程進行打包和運行。我們?nèi)匀皇鞘褂妹钚?，進入當前工程的目錄，并輸入

npm run dev

這段代碼的意思就是以本地服務器的端口啟動這個工程。關(guān)于本地服務器的配置信息，在工程根目錄的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后，會出現(xiàn)一長串信息，最后會出現(xiàn)webpack: Compiled successfully的字樣，代表我們的代碼編譯成功。這時我們打開瀏覽器，輸入localhost:8010，出現(xiàn)如圖所示的網(wǎng)頁，表示我們的第一個Vuejs2.0 ＋ElementUI工程已經(jīng)成功運行。 

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

至此一個簡單的基于VueJs2.0和ElementUI的前端網(wǎng)站的雛形已經(jīng)完成了，接下來的時間我會慢慢介紹構(gòu)建單頁面應用的更多方法和細節(jié)。

以上所述是小編給大家介紹的Vue+ElementUI從零開始搭建自己的網(wǎng)站（一、環(huán)境搭建）詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！