vue項目
一、vue-cli
https://vuxjs.gitbooks.io/vux/content/install/vue.html
?
vue-cli的使用請查看[文檔][https://github.com/vuejs/vue-cli]
?
npm install -g vue-cli
vue init <template-name> ?<project-name>
如下基于 webpack模板（template-name）創(chuàng)建的項目名為my-project案例：
vue init webpack my-project
一、搭建環(huán)境
安裝vue
npm install vue
# 安裝 vue-cli
npm install -g vue-cli
# 初始化 webpack 項目
vue init webpack my-projectcd?my-project# npm可能出現(xiàn)訪問速度極慢的情況，推薦使用cnpm
進(jìn)入到項目目錄
cd my-project
#跑程序
npm run dev
?
打開瀏覽器，輸入控制臺的地址，這樣vue項目就跑起來了...
?
下載其它包：
#下載mint-ui
npm i axios mint-ui
?
二、src目錄介紹
Router目錄：
index.js中注冊全局組件router-view ?router-link
Vue.use(Router);作用
掛載Vue.prototype.$router||$route
未來所有組件中的this對象，就具備了該屬性，所有的this其實就是Vue子類對象
?
Assest目錄：
?
三、main.js中配置
#配置axios ?注意單引號
import Axios from 'axios'
?
// 配置公共URL
Axios.defaults.baseURL = 'https://www.sinya.online/api/'
?
Vue.prototype.$axios = Axios
?
?
?
四、App.vue頁面內(nèi)容重置
根模板設(shè)置
數(shù)據(jù)導(dǎo)出返回值，參考comments目錄下HelloWorld.vue
樣式style設(shè)置
?
五、mint-ui使用配置
http://mint-ui.github.io/docs/#/zh-cn2/quickstart
# mint-ui引入 ?上面已經(jīng)在項目內(nèi)使用npm i mint-ui -S安裝環(huán)境
# 在main.js中寫入以下內(nèi)容
# 配置MintUI
impUI from 'mint-ui'
# 引入css
import 'mint-ui/lib/style.css'
#安裝插件 注冊全局組件及掛載屬性
Vue.use(MintUI)
?
六、底部導(dǎo)航路由的跳轉(zhuǎn)
v-model數(shù)據(jù)的雙向綁定
在App.vue中使用watch監(jiān)測頁面變化：
?
export default{
data(){
return {
??selected:’’
}
},
watch:{
selected(newV,oldV){
????console.log(newV);
}
}
}
?
?
七、配置對應(yīng)的幾個組件vue文件
創(chuàng)建對應(yīng)的文件夾：Home ?Member ?Search ?Shopcart
文件夾中創(chuàng)建對應(yīng)的vue組件文件:
Home.vue
Member.vue
Search.vue
Shopcart.vue
在src目錄下的router目錄下index.js中配置路由：
# 組件導(dǎo)入
import Home from ‘@/components/Home/Home’
import Home from ‘@/components/Member/Member’
import Home from ‘@/components/Search/Search’
import Home from ‘@/components/Shopcart/Shopcart’
# 配置routes
export default new Router({
routes: [
{
path: '/home',
name: 'home',
component: Home
},
{
path: '/search',
name: 'search',
component: Search
},
{
path: '/member',
name: 'member',
component: Member
},
{
path: '/shopcart',
name: 'shopcart',
component: Shopcart
}
]
})
八、在App.vue中修改watch監(jiān)測頁面變化：
export default{
data(){
return {
??selected:?''
}
},
watch:{
selected(newV,oldV){
???// console.log(newV);
???this.$router.push({
????????name: newV
??????})
}
}
}
?
十、App.vue中模板設(shè)置
<template>
??<div id="app">
????<mt-header fixed title="信息管理系統(tǒng)"></mt-header>
????<router-view />
????<mt-tabbar v-model="selected">
??????<mt-tab-item id="home">
????????<img slot="icon" src="./assets/img/主頁.png">
????????主頁
??????</mt-tab-item>
??????<mt-tab-item id="member">
????????<img slot="icon" src="./assets/img/會員.png">
????????會員
??????</mt-tab-item>
??????<mt-tab-item id="shopcart">
????????<img slot="icon" src="./assets/img/購物車.png">
???????購物車
??????</mt-tab-item>
??????<mt-tab-item id="search">
????????<img slot="icon" src="./assets/img/查找.png">
???????查找
??????</mt-tab-item>
????</mt-tabbar>
??</div>
</template>
