1. 客戶端項目搭建
1.1 創建項目目錄
cd 項目目錄
vue init webpack 項目名稱
打開項目，在pycharm的終端下運行vue項目，因為vue項目運行每次都要要輸入npm run dev，所以我們進行優化處理。
接下來，我們根據終端上效果顯示的對應地址來訪問項目(如果有多個vue項目在運行，8080端口被占據了，服務器會自動改端口，所以根據自己實際在操作中看到的地址來訪問。)
訪問：http://localost:8080
1.2 初始化項目
清除默認的HelloWorld.vue組件和APP.vue中的默認模板代碼和默認css樣式
<template> <div id="app"> </div> </template> <script> export default { name: 'App', components: { } } </script> <style> </style>
接下來，我們可以查看效果了，一張白紙~
1.3 安裝路由vue-router
官方文檔：https://router.vuejs.org/zh/
下載安裝路由組件
npm i vue-router -S
# npm install vue-router --save
配置路由
1.初始化路由對象
在src目錄下創建routes路由目錄，在router目錄下創建index.js路由文件，index.js路由文件中，編寫初始化路由對象的代碼 .
// 1. 引入vue和vue-router組件核心對象，並在vue中通過use注冊vue-router組件 import Vue from "vue"; import Router from "vue-router"; Vue.use(Router); // 2. 暴露vue-router對象，並在vue-router里面編寫路由，提供給main.js調用 export default new Router({ // 設置路由模式為‘history’，去掉默認的# mode: "history", routes:[ // 路由列表 // { // name:"路由名稱[對應組件的name值，將來用於跳轉頁面]", // path: "訪問url路徑", // component: 組件名 // }, ] })
2. 注冊路由信息
打開main.js文件，把router路由規則對象注冊到vue中，代碼：
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router/index'; Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' });
3 在視圖中顯示路由對應的內容
在App.vue組件中，添加顯示路由對應的內容。代碼：
<template> <div id="app"> <!-- 標簽名必須是這個rouer-view --> <router-view/> </div> </template> <script> export default { name: 'App', components: { } } </script> <style> </style>
注意：如果在vue創建項目的時候，設置安裝vue-router，則項目會自動幫我們生成上面的router目錄和index.js里面的代碼，以及自動到main.js里面注冊路由對象。
2. 路由對象提供的操作
在我們安裝注冊了vue-router組件以后，vue-router在vue項目中會幫我們在全局范圍內所有組件里面創建2個對象給我們使用：
1. `this.$router`，可用於在js代碼中進行頁面跳轉。
2. `this.$route`，可用於獲取地址欄上面的url參數。
2.1 頁面跳轉
在vue-router提供的操作中， 進行頁面跳轉有2種方式：
1. 使用`<router-link to="url地址">`來跳轉
2. 在`<script>`中使用`this.$router.push(url地址)`來跳轉
在`<script>`中還可以使用`this.$router.go(整數)`，表示跳轉返回上一頁或者上幾頁，下一個或者下幾頁
2.1.1 router-link標簽
例如，我們就可以在Home.vue組件中，使用router-link跳轉到User.vue組件中。
routes/index.js，代碼：
// 1. 引入vue和vue-router組件核心對象，並在vue中通過use注冊vue-router組件 import Vue from "vue"; import Router from "vue-router"; Vue.use(Router); // Router是類 // 2. 暴露vue-router對象，並在vue-router里面編寫路由，提供給main.js調用 // 導入組件 // import 組件名 from "../components/組件名" import Home from "../components/Home"; import User from "../components/User"; export default new Router({ mode:"history", // 路由地址的顯示模式： 默認hash，表示地址欄上面出現# routes:[ { name:"Home", path: "/", component: Home },{ name:"User", path: "/user", component: User }, ], }); // vue-router除了可以進行組件和url地址的綁定以外，還可以 // 進行不同組件的頁面跳轉，
Home.vue代碼：
<template> <div> 首頁頁面組件 <a href="/user">個人中心</a> <!-- router-link標簽，本質上就是a標簽，只是由vue-router進行加工處理可以顯示局部頁面刷新，不會重新加載內容，進行ajax跳轉--> <router-link to="/user">個人中心</router-link> <router-link :to="url">個人中心</router-link> <router-link :to="{name:'User'}">個人中心</router-link> </div> </template> <script> export default { name: "Home", data(){ return { url: "/user", } }, methods:{ } } </script> <style scoped> </style>
2.1.2 this.$router.push()`跳轉
<template> <div> 首頁頁面組件 <a href="/user">個人中心</a> <!-- router-link標簽，本質上就是a標簽，只是由vue-router進行加工處理可以顯示局部頁面刷新，不會重新加載內容，進行ajax跳轉--> <router-link to="/user">個人中心</router-link> <router-link :to="url">個人中心</router-link> <router-link :to="{name:'User'}">個人中心</router-link> <button @click="jump">個人中心</button> </div> </template> <script> export default { name: "Home", data(){ return { url: "/user", } }, methods:{ jump(){ // 開發中可以先進行權限，登錄之類的判斷，然后再進行跳轉 // this.$router.back(); // 返回上一頁，本質上就是 location.back() // this.$router.go(-1); // 返回上一頁，本質上就是 location.go() // this.$router.forward(); // 跳轉到下一頁，本質上就是 location.forward() this.$router.push("/user"); // 跳轉到站內的制定地址頁面中，本質上就是 location.href // 注意,this.$router.push() 不能跳轉到其他網站。如果真的要跳轉外站，則使用location.href="站外地址，記得加上http://協議" } } } </script> <style scoped> </style>
2.2 參數傳遞
`vue-router`提供了`this.$route`，可以讓我們接收來自其他頁面的附帶參數。參數有2種：
1. 查詢字符串(`query string`)，就是地址欄上面`?`號后面的參數，
例如：`http://localhost:8008/user?name=xiaoming&pwd=123`，這里`name=xiaoming&pwd=123`就是查詢字符串參數。
2. 路由參數(`router params`)，就是地址欄上面路由路徑的一部分，
例如：`http://localhost:8080/user/300/xiaoming`，此時，300屬於路由路徑的一部分，這個300就是路由參數.，當然，xiaoming,或者user也可以理解是路由參數，就是看我們的頁面中是否需要接收而已。
2.2.1 獲取查詢字符串
1. 必須先有一個頁面跳轉發送參數。例如，在Home組件中跳轉到User組件中，需要傳遞name和pwd查詢字符串。
Home.vue代碼：
<template> <div> Home組件代碼 <button @click="func1">傳遞查詢字符串參數</button> <router-link to="/user?name=xiaoming&pwd=123">傳遞查詢字符串參數</router-link> <router-link :to="{path:'/user',query:{'name':'xiaoming','pwd':'123'}}">傳遞查詢字符串參數</router-link> <router-link :to="{name:'User',query:{'name':'xiaoming','pwd':'123'}}">傳遞查詢字符串參數</router-link> </div> </template> <script> export default { name: "Home", data(){ return { url:"/user", } }, methods:{ func1(){ this.$router.push("/user?name=xiaoming&pwd=123"); } } } </script> <style scoped> </style>
2. 下一個頁面中，這里代表的就是User組件，接收來自Home組件的參數。
<template> <div><button @click="back">返回上一頁</button> </div> </template> <script> export default { name: "Uesr", methods:{ back(){ // 頁面跳轉，返回上一頁 this.$router.go(-1); // this.$router.back(); } }, created() { // 需要提前接收參數或者接收服務端數據的初始化代碼都寫在created，此時頁面還沒有出來 // this.$route的其他屬性 console.log(this.$route.fullPath); // /login?name=xiaoming&pwd=123 除了域名地址后面的所有內容 console.log(this.$route.path); // /user 去掉參數以后的路徑 // 接收來自其他組件的查詢字符串參數[query srting] var name = this.$route.query.name; console.log(name); } } </script> <style scoped> </style>
2.2.2 獲取路由參數
例如：我們用戶的界面都是一樣的，但是每一個用戶來到自己的頁面中，顯示的內容肯定都是不一樣的，此時，我們需要使用不同的路徑來區分不同的用戶。這時候，可以在路由路徑中使用路由參數表示不同用戶的id
我們就需要在route/index.js中設置一個路由參數在路由信息里面
src/routes/index.js設置路由參數。
import Vue from "vue"; import Router from "vue-router"; Vue.use(Router); import Home from "../components/Home"; import User from "../components/User"; export default new Router({ mode:"history", routes:[ { name:"Home", path: "/", component: Home },{ name:"User", path: "/user/:id/img-:img_id",//冒號變量名就代表設置的路由參數 component: User }, ], });
然后我們就是在Home中如果需要轉到User里面。
Home.vue代碼：
<template> <div> 首頁頁面組件 <router-link to="/user/100/img-10086">路由參數</router-link> </div> </template> <script> export default { name: "Home", data(){ return { url: "/user", } }, } </script> <style scoped> </style>
User.vue，組件中可以通過`this.$route.params`接收路由參數。
<template> <div> 用戶中心頁面組件 </div> </template> <script> export default { name: "User", created() { // 路由參數 // params是this.$route里面的一個數組，this.$route會自動收集路由列表中已經標記為路由參數所有內容保存到params中 let id = this.$route.params.id; console.log(id); let img_id = this.$route.params.img_id; console.log(`img_id = ${img_id}`); } } </script> <style scoped> </style>
3. ElementUI
對於前端頁面布局，我們可以使用一些開源的UI框架來配合開發，常用的UI框: bootstrap，H-ui框架，lay-UI框架，Amaze UI，zui框架，ElementUI.
Vue開發前端項目中，比較常用的就是ElementUI了。
ElementUI是餓了么團隊開發的一個UI組件框架，這個框架提前幫我們提供了很多已經寫好的通用模塊，我們可以在Vue項目中引入來使用，這個框架的使用類似於我們前面學習的bootstrap框架，也就是說，我們完全可以把官方文檔中的組件代碼拿來就用，有定制性的內容，可以直接通過樣式進行覆蓋修改就可以了。
中文官網：http://element-cn.eleme.io/#/zh-CN
文檔快速入門：http://element-cn.eleme.io/#/zh-CN/component/quickstart
3.1 快速安裝ElementUI
項目根目錄執行以下命令:
npm i element-ui -S
上面的命令等同於 `npm install element-ui --save`
3.2 配置ElementUI到項目中
在main.js中導入ElementUI，並調用。代碼：
// elementUI 導入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 調用插件
Vue.use(ElementUI);
成功引入了ElementUI以后，接下來我們就可以開始進入前端頁面開發，首先是首頁。