vue腳手架搭建之單檔案元件的開發
由於一個完整的專案包含許多的檢視，元件全部寫在一個html頁面中也不利於後期維護。所以我們需要通過腳手架進行專案工程化來構建我們的專案，就不再使用html來構建了，也不在引入vue.js檔案了。全部換成單檔案元件+webpack+vue的腳手架進行專案的構建。
首先，需要全域性安裝vue腳手架（全域性安裝，只需一次），方法是： npm i vue-cli -global
然後就可以構建專案了，vue提供了兩種模板：webpack的模板、webpack-simple的模板。
-
官方模版 vue init webpack my-project （tips：程式碼語法檢查較麻煩，適合新手使用）
-
推薦 vue init webpack-simple my-project （tips：適合熟練vue腳手架專案的人用）
用這個模板構建專案的前提是已經配置過vue和webpack以及vue腳手架的環境，即 npm install -g vue全域性安裝、npm i webpack -g全域性安裝、 npm install -g vue-cli腳手架全域性安裝。使用指令模板之後，根據提示進行依賴安裝。
- 專案啟動 npm run dev
- 專案打包 npm run build
- 單檔案元件 元件 css擁有作用域，scoped屬性可規定當前css只作用於自己的元件，不影響其他
以一個移動端小專案來代入-------------
假設vue和webpack環境已配好，新建一個目錄並調出小黑窗-->npm i vue-cli -g（安裝過就不用再裝）--->vue init webpack pro--->cd pro--->npm run dev執行即可，會啟動8080埠，瀏覽器開啟localhost:8080，若佔用會預設加1即8081。
專案構建好之後就可以根據需求來修改配置了。下面用路由來實現三個頁面的跳轉：
-
//APP.vue -
<template> -
<div id="app"> -
<header>{{str}}</header> -
<section> -
<router-view @toparent="getdata"></router-view> -
</section> -
<footer> -
<router-link to="/home" tag="span">首頁</router-link> -
<router-link to="/about" tag="span">關於</router-link> -
<router-link to="/other" tag="span">其他</router-link> -
</footer> -
</div> -
</template> -
<script> -
export default { -
name: 'App', -
data:function(){ -
return{ -
str:"首頁" -
} -
}, -
methods:{ -
getdata(msg){ -
this.str=msg -
} -
} -
} -
</script> -
<style> -
*{ -
margin: 0; -
padding: 0; -
} -
.router-link-active{ -
color: yellow; -
} -
#app { -
height: 100Vh; -
display: flex; -
flex-direction: column; -
} -
header,footer{ -
height: 40px; -
background: blue; -
color: #fff; -
text-align: center; -
line-height: 40px; -
} -
section{ -
flex: 1; -
} -
footer span{ -
float: left; -
width: 33.3%; -
} -
</style>
注：這個單檔案元件在main.js已在vue例項化中掛載，index.html頁面引入即可展示。在這個元件裡面可以通過router-link做一個導航路由，去寫一下導航路由連線的元件（在專案的src資料夾的components目錄下建Home、About、Other元件）
-
//Home.vue -
<template> -
<div> -
<h1>首頁</h1> -
</div> -
</template> -
<script> -
export default{ -
name:"Home", -
data(){ -
return{ -
str:"首頁" -
} -
}, -
mounted(){ -
this.$emit("toparent",this.str) -
} -
} -
</script> -
<style> -
</style>
-
//Other.vue -
<template> -
<div> -
<h1>其他</h1> -
</div> -
</template> -
<script> -
export default{ -
name:"Other", -
data:function(){ -
return{ -
str:"其他" -
} -
}, -
mounted(){ -
this.$emit("toparent",this.str) -
} -
} -
</script> -
<style> -
</style>
-
//About.vue -
<template> -
<div> -
<h1>關於</h1> -
</div> -
</template> -
<script> -
export default{ -
name:"About", -
data(){ -
return{ -
str:"關於" -
} -
}, -
mounted(){ -
this.$emit("toparent",this.str) -
} -
} -
</script> -
<style> -
</style>
然後在router目錄下配置一下路由規則
-
//index.js -
import Vue from 'vue' -
import Router from 'vue-router' -
import HelloWorld from '@/components/HelloWorld' -
import Home from '../components/Home' -
import About from '../components/About' -
import Other from '../components/Other' -
Vue.use(Router) -
export default new Router({ -
routes: [ -
{ -
path: '/home', -
component: Home -
}, -
{ -
path: '/about', -
component: About -
}, -
{ -
path: '/other', -
component: Other -
}, -
{ -
path: '*', -
redirect:"/home" -
} -
] -
})
注：上面程式碼有用到子元件向父元件傳值，用的是自定義繫結事件@toparent="getdata"，子元件在掛載的時候通過this.$emit("toparent",this.str)將資料傳送給父元件，父元件通過事件getdata（msg）{console.log(msg)}來接收，msg就是接收的資料。
下面就是用axios來請求資料的使用，需要安裝依賴npm i axios -S,哪個檔案使用就在哪個檔案中引入，引入方式是import axios from "axios".上程式碼：
-
//Home.vue -
<template> -
<div> -
<h1>首頁</h1> -
<ul> -
<li v-for="item in list"><router-link :to="'/detail/'+item.pid" tag="span">{{item.pname}}</router-link></li> -
</ul> -
</div> -
</template> -
<script> -
import axios from "axios" -
export default{ -
name:"Home", -
data(){ -
return{ -
str:"首頁", -
list:[] -
} -
}, -
mounted(){ -
this.$emit("toparent",this.str) -
var _this = this -
axios({ -
url:"http://jx.xuzhixiang.top/ap/api/productlist.php" -
}).then(function(data){ -
_this.list = data.data.data -
}) -
} -
} -
</script> -
<style> -
</style>
在上面Home元件裡面請求資料展示在頁面上，然後通過params傳參到詳情頁面。下面是詳情頁面的元件：
-
//Detail.vue -
<template> -
<div> -
<h1>詳情</h1> -
<ul> -
<li v-for="item in arr"> -
<img :src="item.imgSrc"/> -
<span >{{item.desC}}</span> -
</li> -
</ul> -
</div> -
</template> -
<script> -
import axios from "axios" -
export default{ -
name:"Detail", -
data(){ -
return{ -
str:"詳情", -
arr:[], -
imgsrc:"", -
desc:"" -
} -
}, -
mounted(){ -
this.$emit("toparent",this.str); -
var _this = this; -
axios({ -
url:"http://jx.xuzhixiang.top/ap/api/detail.php", -
params:{id:_this.$route.params.id} -
}).then(function(data){ -
_this.imgsrc = data.data.data.pimg; -
_this.desc = data.data.data.pdesc; -
_this.arr.push({imgSrc:_this.imgsrc,desC:_this.desc}); -
}) -
} -
} -
</script> -
<style scoped=""> -
ul li{ -
width: 300px; -
height: 480px; -
background: #CCCC99; -
float: left; -
margin: 10px; -
} -
img{ -
display: block; -
width: 260px; -
height: 300px; -
margin:10px 0 0 20px; -
} -
span{ -
display: block; -
margin:20px 0 0 20px; -
} -
</style>
index.js中配置一下路由規則
-
//index.js -
import Vue from 'vue' -
import Router from 'vue-router' -
import HelloWorld from '@/components/HelloWorld' -
import Home from '../components/Home' -
import About from '../components/About' -
import Other from '../components/Other' -
import Detail from '../components/Detail' -
Vue.use(Router) -
export default new Router({ -
routes: [ -
{ -
path: '/home', -
component: Home -
}, -
{ -
path: '/about', -
component: About -
}, -
{ -
path: '/other', -
component: Other -
}, -
{ -
path: '/detail/:id', -
component: Detail -
}, -
{ -
path: '*', -
redirect:"/home" -
} -
] -
})
對傳遞資料的處理寫在詳情元件上面。
引入icon圖示的方法，main.js裡面匯入檔案
import './icon/iconfont.css'和vue搭建比較好的框架有Element（適合pc端）餓了嗎餓了嗎 Mintui（適合移動端的UI框架）mint-ui要翻牆要翻牆
另外，vue裡面返回上一級的操作是：$router.back(-1)，這個經常會用到。