vue-cli工程化專案開發
vue-cli工程化專案開發
目錄
- vue-cli簡介
- vue-cli環境搭建
- 多個介面的建立和顯示
- 元件的使用
- 路由
- 網路請求
課程內容
1.vue-cli簡介
q.vue-cli是什麼?
vue-cli是一個工具, 是vue命令列中工具,能建立集成了很多技術的模板,
在這個基礎上提供了其他的功能,例如測試,開發部署,es6轉es5,…
q.vue-cli的版本
vue-cli 2 現在專案中使用
vue-cli 3 以後常用工具
2.vue-cli環境搭建
q.如何搭建這個環境?
-
Step1: 安裝vue-cli工具
cnpm install -g vue-cli測試:
vue -V -
Step2: 建立專案
vue init webpack my-project說明: webpack是模板名
simple vue單檔案模板
webpack-simple 模板
webpack 模板(全功能)說明:
ESLint ESLint 是一個程式碼規範和錯誤檢查工具
unit tests 單元測試
e2e test 測試技術
Yarn是和npm類似的工具,好處是把下載做一個快取
最後讓我們選擇用哪個工具下載依賴, 不選擇 -
Step3: 安裝依賴
cd hello cnpm install -
Step4: 開發模式啟動專案
npm run dev
q.各個檔案或目錄的作用
目錄截圖
package.json node專案的配置檔案
scripts選項 可以使用的命令
dependencies 依賴的庫
devDependencies 開發的時候依賴
注意: 新增一個npm的庫到專案
cnpm install 庫名 --save
cnpm install 庫名 --save-dev
index.html 單檔案專案中檔案
說明: 編譯後的會自動插入到這個檔案
src目錄 放原始碼的目錄
static目錄 放靜態資原始檔
config目錄 程式的配置
build目錄 存放元件指令碼
q.src的結構
src/index.js 程式的入口
說明: 建立了一個vue例項,
依賴 App.vue
依賴 router
src/App.vue
說明: 核心程式碼 router-view
src/router/index.js
說明: 這個是整個程式的路由檔案
src/components 放所有介面,放所有元件
檔案結構
3.多個介面的建立和顯示
案例: dou專案
q.如何顯示多個介面
-
Step1.建立book介面
複製Helloworld.vue
刪除不要的內容
建立book,music,film<template> <div> </div> </template> <script> export default { name: '', data () { return { } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style> -
Step2.router/index.js匯入元件
import Book from '@/components/Book' -
Step3.router/index.js設定每個介面路由
新增 /
新增 /book
新增 /music
新增 /film說明: 預設會顯示 /book
export default new Router({ routes: [ { path: '/', name: 'HelloWorld', redirect:'/book' },{ path: '/book', name: 'book', component: Book },{ path: '/music', name: 'music', component: Music },{ path: '/film', name: 'film', component: Film },{ path: '/bookDetail/:id', name: 'bookDetail', component: BookDetail },{ path: '/musicDetail/:id', name: 'musicDetail', component: MusicDetail },{ path: '/filmDetail/:id', name: 'filmDetail', component: FilmDetail }, ] }) -
Step4.修改App.vue
去除預設圖片
去除 #app 新增樣式
新增tabbar router-link -
Step5.新增樣式,改善顯示效果
4.元件的使用
q.如何使用元件
-
Step1: 建立一個vue檔案,在components中
在template中寫html
在style中寫css
在script中寫js邏輯說明: export default {}
表示匯出一個物件 -
Step2: 在book,music,film用,先匯入這個元件
-
Step3: 介面新增屬性 components,設定使用的元件
- Step4: 使用元件
5.路由
q.什麼是SPA應用, 單頁面應用
Single Page Application
vue寫專案(多頁面應用)
方式1: 把vue當成類似jquery庫
使用一個網站由多個html構成
每個html中載入一個vue檔案
方式2: 寫一個html, 其他介面都是一個一個元件
這些元件切換, 相當於切換了頁面
最大問題: 因為只有一個html,百度收錄
前後端分類專案: 搜尋引擎收錄不好收錄
方式3: 寫一個html, 其他介面都是一個一個元件
使用 vue-cli 腳手架工具
一個介面所有html,css和js放在 .vue檔案
一個元件所有html,css和js放在 .vue檔案
q.如何使用vue-router實現路由
-
Step1: 匯入vue-router
-
Step2: 建立需要切換的介面
-
Step3: 建立一個能切換介面物件 VueRouter
-
Step4: 在app例項載入路由物件
-
Step5: 檢視建立router-view用顯示當前頁面
-
Step6: 檢視中建立多個router-link切換介面
6.網路請求
q.在vue中如何實現http請求?
實現方式1: 使用原生ajax (太麻煩)
實現方式2: 使用jquery(太大,只用到ajax,不划算)
實現方式3: vue-resource (ajax庫)
實現方式4: axios (vue現在推薦的)
q.如何實現一個基本的get請求
-
Step1: 匯入庫
-
Step2: 呼叫
axios.get(url).then(function(response){ }).catch(function(error){ })
q.在vue-cli中實現http請求
-
Step1 :安裝需要的庫
cnpm install axios --save -
Step2: 在src/main.js中匯入這個庫
import axios from 'axios'; // 訊息請求 Vue.prototype.$http = axios; // 將axios掛載到Vue例項中的$http 上面 -
Step3: 在book.vue中呼叫
axios.post(ur).then(function(response){ console.log(response) }).catch(function(error){ console.log(error) })
豆瓣專案展示
截圖展示
APP.vue加入公共樣式
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body{
margin: 0;
}
.content{
padding-top: 45px;
padding-bottom: 45px;
}
a{
text-decoration: none;
color:#333;
}
.cell{
padding:10px;
border-bottom:1px solid #ddd;
display: flex;
}
.cell>a{
display: flex;
}
.cell-img img{
width: 100px;
height: 160px;
}
.cell-info{
padding-left:10px;
display: flex;
flex-direction: column;
}
.cell-info span{
display: block;
line-height: 27px;
}
.info{
padding:10px;
}
.info-title{
line-height: 40px;
font-size: 15px;
font-weight: bold;
}
公共頭部
<template>
<div class="navbar">
<div class="left">
<a :href="leftUrl">{{leftTitle}}</a>
</div>
<div class="title">{{title}}</div>
<div class="right"></div>
</div>
</template>
<script>
export default {
name: 'navbar',
props:["title","leftUrl","leftTitle"],
data () {
return {
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.navbar{
width: 100%;
height: 44px;
background: #eaeaea;
border-bottom:1px solid #666;
line-height: 44px;
text-align: center;
position: fixed;
left:0;
top:0;
display: flex;
}
.left{
flex-basis: 60px;
}
.title{
flex-grow: 1;
}
.right{
flex-basis: 60px;
}
</style>
公共底部
<template>
<div class="tabbar">
<div class="tabbar">
<a class="tabbar-item" :class="{'active':activeIndex==0}" href="#/book">圖書</a>
<a class="tabbar-item" :class="{'active':activeIndex==1}" href="#/music">音樂</a>
<a class="tabbar-item" :class="{'active':activeIndex==2}" href="#/film">電影</a>
</div>
</div>
</template>
<script>
export default {
name: 'tabbar',
props:["activeIndex"],
data () {
return {
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.tabbar{
width: 100%;
height: 44px;
background: #eaeaea;
border-top:1px solid #666;
text-align: center;
line-height: 44px;
display: flex;
justify-content: space-around;
position: fixed;
bottom:0;
left:0;
}
.tabbar-item{
color: #999;
}
.active{
color: #000;
}
</style>
圖書列表
<template>
<div>
<navbar title="圖書列表"></navbar>
<div class="content">
<div class="tabview">
<div class="cell" v-for="(item,index) in list" :key="index">
<router-link :to="'/bookDetail/'+item.id">
<div class="cell-img">
<img :src="imagePrefix+item.image" alt="">
</div>
<div class="cell-info">
<span>{{item.name}}</span>
<span>作者：{{item.author}}</span>
<span>價格：{{item.price}}元</span>
<span>時間：{{item.pubdate}}</span>
<span>出版社：{{item.publisher}}</span>
<span>評分：{{item.rating}}</span>
</div>
</router-link>
</div>
</div>
</div>
<tabbar active-index="0"></tabbar>
</div>
</template>
<script>
import Tabbar from './Tabbar.vue'
import Navbar from './Navbar.vue'
export default {
name: 'book',
data(){
return{
list:[],
imagePrefix:'http://127.0.0.1/project/dou/api/'
}
},
created(){
var url = "http://127.0.0.1/project/dou/api/public/index.php?m=book&a=list"
var that = this
this.$http.get(url).then(function(res){
var list = res.data.result
console.log(list)
that.list=list
})
},
components:{
Tabbar:Tabbar,
Navbar:Navbar
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
圖書詳情
<template>
<div>
<navbar title="圖書詳情" left-title="返回" left-url="javascript:history.back()"></navbar>
<div class="content">
<div class="cell">
<div class="cell-img">
<img :src="item.image?imagePrefix+item.image:''">
</div>
<div class="cell-info">
<span>{{item.name}}</span>
<span>作者：{{item.author}}</span>
<span>價格：{{item.price}}元</span>
<span>時間：{{item.pubdate}}</span>
<span>出版社：{{item.publisher}}</span>
<span>評分：{{item.rating}}</span>
</div>
</div>
<div class="info">
<div class="info-title">作者簡介</div>
<div>{{item.author_intro}}</div>
<div class="info-title">圖書簡介</div>
<div>{{item.introduce}}</div>
</div>
</div>
</div>
</template>
<script>
import Tabbar from './Tabbar.vue'
import Navbar from './Navbar.vue'
export default {
name: 'bookDetail',
data(){
return{
item:{},
imagePrefix:'http://127.0.0.1/project/dou/api/'
}
},
created(){
var id = this.$route.params.id;
console.log(id)
var url = "http://127.0.0.1/project/dou/api/public/index.php?m=book&a=detail"+"&id="+id
var that = this
this.$http.get(url).then(function(res){
var item = res.data.result
console.log(item)
that.item = item
})
},
components:{
Tabbar:Tabbar,
Navbar:Navbar
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>