Vue中使用Element-ui快速搭建網頁

最近寫了一個簡單的郵件統計頁面，一個列表、一個比較詳細的頁面。

由于頁面比較簡單，其實使用bootstrap、jquery、Awesome就可以完成了。只是頁面上對郵件分類查看、篩選的事件比較多；當form中的select、input等值發生改變的時候，就需要重新從后臺獲取數據，感覺這樣的功能需求，使用vue就會方便很多。于是就打算使用vue寫一份。

第一步：使用vue-cli快速創建項目

在想要放置項目根目錄的地方打開cmd

快捷方式：

打開到目錄，然后在路徑處輸入cmd，然后enter（回車），就可以打開處于這個位置的小黑屏了。

2. 在命令行輸入命令：??xiaoman 是項目名稱，也會是根目錄文件夾名

vue create xiaoman

接下來會讓你根據需要，選擇需要的包、要使用的配置等、

我是選擇了手動配置，即：Manually select features

然后選擇需要的：

使用history路由模式，沒有使用hash的方式方便，去網上搜索了一下，history會有很多坑！？

history模式注意事項：

這種模式需要后臺配置支持。因為我們的應用是個單頁客戶端應用，如果后臺沒有正確的配置，當用戶在瀏覽器直接訪問對應的URL時 就會返回 404，這就不好看了。

額…我是沒有使用過history模式的，都是用hash模式。

最后是問你是否保存一個項目預設，以后就不用一個一個選擇了。我是沒有保存過…

然后回車，會自動下載安裝包了，

3. 下載完成后

可以使用命令行cd xx 進入文件夾，然后運行 npm run serve 啟動項目，

在run serve之前可以打開項目根目錄下的? package.json ,在“serve”字段后面加上 --open

這樣在項目npm run serve成功之后，會自動打開默認瀏覽器打開項目，方便很多。

也可以在進入文件夾后 運行 vue ui 打開vue項目管理盤

點擊項目管理盤上的運行按鈕，就會啟動npm run serve，若沒有報錯，就可以點擊對號上方的啟動app按鈕打開項目。

第二步：準備文件、路由結構、引入element-ui

刪除或直接修改項目不需要的組件、路由

腳手架創建的項目里，home.vue、Helloworld這些不需要的組件刪除或者直接修改成自己需要的組件，記得還要去修改路由、以及路由對應的組件。

組件建議都使用懶加載的方式，可以加快頁面加載速度。

創建好自己需要的組件、路由之后，看下頁面是否報錯，試一下路由是否對應正確。

安裝 組件庫

使用 npm i element-ui -s

然后根據項目需要使用的組件數量決定，是引入整個 Element，或是根據需要僅引入部分組件。

---如果需要使用的組件很多，可以引入整個Element。

整個引入在main.js寫入：

import Vue from 'vue';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import App from './App.vue'; Vue.use(ElementUI);? ?即可使用所有的組件。

---使用個別組件，就按需引入組件，可以減小項目體積，但是一個一個引入，較麻煩一些。

借助?babel-plugin-component，我們可以只引入需要的組件，以達到減小項目體積的目的。

首先，安裝 babel-plugin-component：

npm install babel-plugin-component -D

然后將 .babelrc 修改為：

（如果按照element-ui官網給的設置，我的項目會報錯，不曉得為啥…可能是版本問題？）

3. 使用組件

在element官網的組件中找到需要使用的組件，在main.js中引入、注冊就可以使用了。

在main.js 中寫入：

組件中：

從官網上復制下來的代碼，修改為自己需要的即可

注意在 data中定義需要的數據、在methods中定義需要的函數。

如果還有其他的需求，可以去查看組件提供的Attributes、Options、Events、Methods，通常就可以滿足需求了。

但是使用element-ui組件，修改樣式很困難…

還有一個組件可能要引入多個元素，這樣就不能放在main.js里面，再新建一個element.js

注意里面要引入vue

然后在main.js中引入element.js即可。

Vue

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。