快捷導(dǎo)航

詳解Vue+ElementUI從零開始搭建自己的網(wǎng)站（一、環(huán)境搭建）

更新時間：2019年04月30日 09:31:55 作者：極地雪狼li

這篇文章主要介紹了Vue+ElementUI從零開始搭建自己的網(wǎng)站（一、環(huán)境搭建），文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

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

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

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

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

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

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

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

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

然后再設(shè)置編輯器的為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等插件。不需要我們自己去配置。我們導(dǎo)入這個工程之后，需要做的一件事就是將npm模塊安裝到這個目錄下。我們打開命令行，進入當(dāng)前工程的根目錄，然后輸入

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)匀皇鞘褂妹钚?，進入當(dāng)前工程的目錄，并輸入

npm run dev

這段代碼的意思就是以本地服務(wù)器的端口啟動這個工程。關(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，如果我們想改變端口號或主機名，只要改變這里對應(yīng)的字段即可。
我們輸入npm run dev后，會出現(xiàn)一長串信息，最后會出現(xiàn)webpack: Compiled successfully的字樣，代表我們的代碼編譯成功。這時我們打開瀏覽器，輸入localhost:8010，出現(xiàn)如圖所示的網(wǎng)頁，表示我們的第一個Vuejs2.0 ＋ElementUI工程已經(jīng)成功運行。