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

NodeJS（npm）Webstorm （前端IDE）Nginx（后期用來(lái)轉(zhuǎn)發(fā)請(qǐng)求到后臺(tái)服務(wù)器）

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

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

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

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

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

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

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

然后再設(shè)置編輯器的為ES6語(yǔ)法 如圖

創(chuàng)建ElementUI工程

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

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

npm install

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

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

點(diǎn)擊回車。

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

npm install vue-router --save

npm會(huì)自動(dòng)尋找最新版本的依賴包進(jìn)行安裝。

工程打包運(yùn)行

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

npm run dev

這段代碼的意思就是以本地服務(wù)器的端口啟動(dòng)這個(gè)工程。關(guān)于本地服務(wù)器的配置信息，在工程根目錄的webpack.config.js中，我們可以在該文件中看到如下代碼段：

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

這里的配置信息寫的很清楚，本地的服務(wù)器端口為8010，如果我們想改變端口號(hào)或主機(jī)名，只要改變這里對(duì)應(yīng)的字段即可。 
我們輸入npm run dev后，會(huì)出現(xiàn)一長(zhǎng)串信息，最后會(huì)出現(xiàn)webpack: Compiled successfully的字樣，代表我們的代碼編譯成功。這時(shí)我們打開瀏覽器，輸入localhost:8010，出現(xiàn)如圖所示的網(wǎng)頁(yè)，表示我們的第一個(gè)Vuejs2.0 ＋ElementUI工程已經(jīng)成功運(yùn)行。 

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

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

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

最新評(píng)論