文章目錄
Webpack構建Vue.js項目
使用Webpack構建Vue.js項目時，需要依次輸入項目的基本信息，如下圖所示：
| 基本信息 | 信息介紹 |
|---|---|
| Project name vuedemo1 | 項目名稱 |
| Project description A Vue.js project | 項目描述 |
| Author Lw中 [email protected] | 項目作者 |
| Vue build standalone | Vue項目構建：運行+編譯還是僅運行 |
| Install vue-router? Yes | 是否安裝vue-router |
| Use ESLint to lint your code? No | 是否使用ESLint |
| Set up unit tests No | 是否使用單元測試 |
| Setup e2e tests with Nightwatch? No | 是否使用Nightwatch e2e 測試 |
Should we run npm install for you after the project has been created? (recommended) npm |
是否在項目創建成功後自動執行“npm install”安裝依賴 |
WebPack下的Vue.js項目文件結構
使用WebPack構建Vue.js成功後，找到項目所在目錄，項目文件結構如下圖所示：
| 文件夾名稱 | 簡介 |
|---|---|
| build | 編譯所用到的腳本 |
| config | 各種配置 |
| node_modules | node第三方包 |
| src | 源代碼 |
| static | 靜態文件 |
| index.html | 最外層文件 |
| package.json | node項目配置文件 |
接下來介紹一下比較重要的src文件夾，文件夾所包含的內容如下：
| 文件名稱 | 簡介 |
|---|---|
| assets | 文件夾用到的圖片都可以放在這裏 |
| component | 視圖和組件所在文件夾 |
| router | 路由文件，定義了各個頁面對應的url |
| App.vue | 二級頁面模板，所有的其他Vue.js頁面都作爲改模板的一部分渲染出來 |
| main.js | 沒有實際的業務邏輯，但是爲了支撐整個Vue.js框架，很有必要存在 |
Vue項目中添加新的路由並訪問
在文件目錄src中的component下創建一個新的vue頁面，寫入測試代碼
打開src下的router目錄下的index.js文件，增加新的路由代碼
通過npm run dev項目運行後，輸入localhost:8080/#/say_hi，結果如下圖所示：
Vue項目中使用axios發送請求的方式
axios請求方式如下圖所示：
Vue UI的使用
Vue UI是一個可視化圖形界面方便你去創建、更新和管理項目的方方面面。
命令行界面打開vue ui
瀏覽器中輸入http://localhost:8003
使用vue ui創建新項目
項目文件夾中輸入項目名稱，其他不用改，點擊下一步，選擇【手動】，再點擊下一步，如圖點擊按鈕，勾選上路由Router、狀態管理Vuex，去掉js的校驗。
項目創建成功
Vue項目中添加Element
Element，一套爲開發者、設計師和產品經理準備的基於 Vue 2.0 的桌面端組件庫,網站快速成型工具。
安裝element的命令很簡單，如下所示：
# 切換到項目根目錄
cd vueblog
# 安裝element-ui
cnpm install element-ui --save
然後我們打開項目src目錄下的main.js，引入element-ui依賴
import Element from 'element-ui'
import "element-ui/lib/theme-chalk/index.css"
Vue.use(Element)