Vue (學習第四部 前端專案搭建流程 )
目錄
客戶端專案搭建
建立專案目錄
初始化專案
安裝路由 Vue-router
下載安裝路由元件
配置路由
初始化路由物件
註冊路由資訊
在檢視函式中顯示路由對應的內容
路由物件提供的操作
頁面跳轉
router_link 標籤
this.$router.push() 跳轉
引數傳遞
獲取查詢字串
獲取路由引數
ElementUI
快速安裝ElementUI
配置ElementUI到專案中
首頁
建立首頁元件
建立首頁對應的路由
客戶端專案搭建
建立專案目錄
cd 專案目錄[荏苒資訊]
vue init webpack renran
例如: 吧專案儲存在桌面下的子目錄renran~/Desktop/renran 可以如下操作:
cd Desktop/renran
vue init webpack renran_pc
開啟專案已經,在pycharm的終端下執行VUE專案,
看效果:
上面的步驟, 等同於執行了下面的命令.
npm run dev
接下來,我們根據終端上效果的顯示的對應地址來訪問專案( 如果有多個Vue專案在執行, 8080埠被佔用了, 伺服器就會自動改埠, 所有根據自己的實際情況在操作中看到的地址來訪問.)
初始化專案
清除預設的HelloWorld.vue元件和APP.vue中的預設模板程式碼和預設css樣式
<template> <div id="app"> </div> </template> <script> export default { name: 'App', components: { } } </script> <style> </style>
接下來,檢視效果,一張白紙~
安裝路由 Vue-router
官方文件:https://router.vuejs.org/zh/
下載安裝路由元件
npm i vue-router -S
# npm install vue-router --save
配置路由
初始化路由物件
在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:[
// 路由列表
]
})
註冊路由資訊
開啟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/>' });
在檢視函式中顯示路由對應的內容
在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裡面註冊路由物件>
路由物件提供的操作
在我們安裝註冊了vue-reterzujain以後,vue-router在vue專案中會幫助我們在全域性範圍內所有元件裡面建立2個物件來使用.
1. this.$router ,可用於js 程式碼中進行頁面跳轉
2. this.$route , 也用於獲取位址列上忙的url引數
頁面跳轉
在vue-router提供的操作中,進行頁面跳轉有倆種方法:
1. 使用<日iuter-link to = 'url地址'>來跳轉
2. 在< script> 中使用 this,$router,push(url地址)來跳轉
在<script> 中還可以使用 this,$router.夠(整數) , 表示跳轉返回上一頁或者上幾頁,下一個或者下幾頁
router_link 標籤
例如,我們可以在Home,vue元件中,使用touter-link跳轉到User.vue元件中.
router.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:"路由名稱[對應元件的name值，將來用於跳轉頁面]",
// path: "訪問url路徑",
// component: 元件名
// },
{
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>
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>
引數傳遞
vue-router提供了 this.$route, 可以讓我們接收來自其他頁面的附帶引數. 引數有兩種:
1. 查詢字串( query string ) ,就是位址列上面 ? 號後面的引數,
例如: http://localhost:8008/user?
name+ xiaoming&pwd =123 ,這裡
name= xiaoming&騙我的=123 就是查詢字串引數.
2. 路由引數( router params ),就是位址列上面的路由路徑的一部分,
例如: http://localhost:8080/user/300/xiaoming,此時,300 屬於路由路徑的一部分,這個300 就是路由引數,當然,xiaoming,或者user
也可以理解是路由引數,就是看我們的頁面中是否需要接受而已.
獲取查詢字串
1. 必須先有一個頁面跳轉發送引數.例如:在Home元件中跳轉到User元件中, 需要傳遞name和騙我的查詢字串
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> <button @click="jump">個人中心</button>--> <router-link :to="`/user?name=${name}&pwd=${pwd}`">查詢字串引數</router-link> <router-link :to="'/user?name='+name+'&pwd='+pwd">查詢字串引數</router-link> </div> </template> <script> export default { name: "Home", data(){ return { name: "xiaoming", pwd: "123", 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. 可以下一個頁面中,這裡代表的就是User元件, 接收來自Home元件的引數.
<template> <div> 使用者中心頁面元件 </div> </template> <script> export default { name: "User", created() { // 接收位址列上面的引數 // this.$route是vue-router提供的一個用於接收地址引數的物件。 // 經過main.js裡面註冊router物件以後， // 將來在所有的子元件中，可以通過this.$route來獲取引數或者通過this.$router跳轉頁面 // 查詢字串引數 // query是this.$route裡面的一個數組，this.$route會自動收集位址列上所有的引數儲存到query裡面 // let name = this.$route.query.name; // let pwd = this.$route.query.pwd; // console.log(`name=${name}&pwd=${pwd}`); // ``裡面，${}圈住的內容會被js當成變數來解析 } } </script> <style scoped> </style>
獲取路由引數
例如: 我們的使用者介面都是一樣的,但是每一個使用者來到自己的頁面中,顯示的內容都是不一樣的,此時,我們需要使用不同的路徑來
區分不同的使用者.這時候,可以在路由路徑中使用路由引數表示不同使用者的ID.
例如: 我們需要設定一個route/inde.js中路由資訊裡面,那一段路由屬於路由引數.
src/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:"路由名稱[對應元件的name值，將來用於跳轉頁面]",
// path: "訪問url路徑",
// component: 元件名
// },
{
name:"Home",
path: "/",
component: Home
},{
name:"User",
path: "/user/:id/img-:img_id",
component: User
},
],
});
// vue-router除了可以進行元件和url地址的繫結以外，還可以
// 進行不同元件的頁面跳轉，
然後我們就是在Home中如果需要轉到User裡面.
Homevue程式碼:
<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>--> <!-- <router-link :to="`/user?name=${name}&pwd=${pwd}`">查詢字串引數</router-link>--> <!-- <router-link :to="'/user?name='+name+'&pwd='+pwd">查詢字串引數</router-link>--> <router-link to="/user/100/img-10086">路由引數</router-link> </div> </template> <script> export default { name: "Home", data(){ return { name: "xiaoming", pwd: "123", 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>
User.vue,元件中可以挺過 this.%route.params 接收路由引數.
<template> <div> 使用者中心頁面元件 </div> </template> <script> export default { name: "User", created() { // 接收位址列上面的引數 // this.$route是vue-router提供的一個用於接收地址引數的物件。 // 經過main.js裡面註冊router物件以後， // 將來在所有的子元件中，可以通過this.$route來獲取引數或者通過this.$router跳轉頁面 // 查詢字串引數 // query是this.$route裡面的一個數組，this.$route會自動收集位址列上所有的引數儲存到query裡面 // let name = this.$route.query.name; // let pwd = this.$route.query.pwd; // console.log(`name=${name}&pwd=${pwd}`); // ``裡面，${}圈住的內容會被js當成變數來解析 // 路由引數 // 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>
ElementUI
對於前段頁面的佈局,我們可以使用一些開源的UI框架來配合併發,常用的UI框架: bootstap H-ui框架 lay-UI框架 AmazeUI zui 框架 ElementUI
Vue開發前段專案中,比較常用的就是ElementUIle
ELementUI是餓了麼團隊開發的一個UI元件框架,這個框架提前幫我們提供了很多已經寫好的普通模組,我們可以在Vue專案中引入來使用,這個框架的使用類似於我們之前學過的bootstap框架,也就是說,我們完全可以把官方文件中的元件程式碼拿來使用,有定製性的內容,可以直接通過樣式進行覆蓋修改就可以了.
文件快速入門：http://element-cn.eleme.io/#/zh-CN/component/quickstart
快速安裝ElementUI
醒目根目錄下執行該命令:
npm i element-ui -S
上面的程式碼等同於 npm install element-UI -- save
執行命令效果:
配置ElementUI到專案中
在main.js中匯入ElementUI, 並呼叫. 程式碼:
// elementUI 匯入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 呼叫外掛
Vue.use(ElementUI);
成功引入了ElementUI以後,接下來我們就可以開始進入前端頁面的開發,首先是首頁>
首頁
首頁採用了上下頁面佈局, 首頁是導航欄,,輪播圖, 腳部等幾個小模組.所以我們可以把首頁作為一個元件進行開發, 然後把首頁的這些小模組作為單獨的元件來進行開發.
建立首頁元件
在 src/conponents目錄先建立檔案 Home.vue程式碼:
<template> <div id="home"> 首頁 </div> </template> <script> export default { name:"Home", data(){ return { } } } </script> <style scoped> </style>
建立首頁對應的路由
在router/index,js中引入Home元件,並設定Home元件作為首頁路由程式碼:
import Vue from "vue"
import Router from "vue-router"
// 後面這裡引入可以被使用者訪問的頁面元件
import Home from "../components/Home"
Vue.use(Router);
export default new Router({
// 路由跳轉模式，注意使用 history
mode: "history",
// 路由規則
routes:[
{
// name:"路由別名",
name:"Home",
// path: "路由地址",
path: "/",
// component: 元件類名,
component: Home,
},
]
})