1.用到的技术点

vue 是一个渐进式JavaScript框架 npm install vue

vue-route 是一个路由匹配功能 npm install vue-router

vue-resource 发送ajax请求的 npm install vue-resource

vue-preview 图片预览插件 npm i vue-preview -S

vuex 组件传值 npm install vuex --save

mint-ui 基于vue的移动端组件 npm i mint-ui -S

mui 最接近原生的前端框架

2.  template.html  是整个主页面,最终所有的js和css和html都会匹配到这里的

1.只需要定义一个ID容器  

Vue项目

@media only screen and (width:320px){

html{

font-size:16px;

}

}

@media only screen and (width:360px){

html{

font-size:18px;

}

}

@media only screen and (width:414px){

html{

font-size:20px;

}

}

body{

margin: 0px;

padding: 0px;

}

2.  main.js   是一个主模块集成了所有的第三方包和css文件和js文件和路由匹配

1.引入第三方包,使用import关键字,基于vue的必须集成到vue中以 Vue.use() 方法

2.导入项目中所需要的css

3.让app.vue给用户显示的第一个组件

1.首先app.vue引入到mian.js中  import App from './App.vue'

2.在Vue实例中定义render函数,变量名需要一致

render:function(createElement){ //项目一启动之后,呈现给用户的第一个组件

return createElement(App)

}

4.设置全局过滤器  Vue.filter()

5.路由整个步骤

1.导入需要设置路由的组件

import home from './components/home/home.vue'

import category from './components/category/category.vue'

2.设置路由规则 new VueRouter实例

{path:'/home',component:home},来进行路由匹配,需要跟go属性一致

{path:'/',redirect:'/home'} 来进行默认路由匹配

const router = new VueRouter({

routes:[

{path:'/',redirect:'/home'},

{path:'/home',component:home},

{path:'/category',component:category},

{name:"pictureAndTextIntruduction",path:"/goods/pictureAndTextIntruduction",component:pictureAndTextIntruduction},

{path:"/goods/goodscomment",component:goodscomment}

]

})

3.把路由匹配规则放到跟实例 new Vue({})的router中,就实现整个路由匹配功能了

new Vue({

router:router

})

6.vuex的使用步骤

1.新建一个空仓库 var store = new Vuex.Store()

仓库里有四个对象

state  存储数据的地方

getters 获取数据的地方

mutations 同步更新数据

actions 异步更新数据

2.把仓库的东西放到跟实例中,变量名需一致

new Vue({

store:store

})

//导入我们的第三方包

import Vue from 'vue' //es5 ===> var vue = require('vue')

import Mint from 'mint-ui'

import VueRouter from 'vue-router'

import VueResource from 'vue-resource'

import moment from 'moment'

import VuePreview from 'vue-preview'

import axios from 'axios'

import Vuex from 'vuex'

//集成到Vue中

Vue.use(Mint)

Vue.use(VueRouter) // vue.$route vue.$router

Vue.use(VueResource) //vue.$http...

Vue.use(VuePreview)

Vue.use(Vuex) //$store

Vue.prototype.$axios = axios

//导入项目中需要用到的css

import 'mint-ui/lib/style.min.css'

import './statics/mui/css/mui.min.css'

import './statics/css/common.css' //自己写的样式,放在最好

//导入我们要渲染的根组件这个模块

import App from './App.vue'

//全局过滤器

Vue.filter('dateFmt',(input,formatString)=>{

const lastFormatString = formatString || 'YYYY-MM-DD HH:mm:ss'

/**

* 参数1:格式化的原始时间

* 参数2:格式化的字符串

*/

return moment(input).format(lastFormatString)

})

//导入需要设置路由规则的组件

import home from './components/home/home.vue'

import category from './components/category/category.vue'

import shopcart from './components/shopcart/shopcart.vue'

import mine from './components/mine/mine.vue'

import newslist from './components/news/newslist.vue'

import newsinfo from './components/news/newsinfo.vue'

import photolist from './components/photo/photolist.vue'

import photoinfo from './components/photo/photoinfo.vue'

import goodslist from './components/goods/goodslist.vue'

import goodsinfo from './components/goods/goodsinfo.vue'

import pictureAndTextIntruduction from './components/goods/pictureAndTextIntruduction.vue'

import goodscomment from './components/goods/goodscomment.vue'

//创建路由对象,设置路由规则

const router = new VueRouter({

routes:[

{path:'/',redirect:'/home'},

{path:'/home',component:home},

{path:'/category',component:category},

{path:'/shopcart',component:shopcart},

{path:'/mine',component:mine},

{path:'/news/newslist',component:newslist},

{path:'/news/newsinfo/:newsId',component:newsinfo},

{path:'/photo/photolist',component:photolist},

{path:'/photo/photoinfo/:photoId',component:photoinfo},

{path:'/goods/goodslist',component:goodslist},

{path:"/goods/goodsinfo/:goodsId",component:goodsinfo},

{name:"pictureAndTextIntruduction",path:"/goods/pictureAndTextIntruduction",component:pictureAndTextIntruduction},

{path:"/goods/goodscomment",component:goodscomment}

]

})

//创建一个仓库

//window

const store = new Vuex.Store({

state: {//存储数据的地方

goodsList:[]

},

getters: {//获取数据

//获取加入购物车的商品的数组

getGoodsList(state){

return state.goodsList

},

//获取加入购物车中的总数量

getGoodsCount(state){

let totalCount = 0

for(var i=0;i

totalCount+=state.goodsList[i].count

}

return totalCount

}

},

mutations: {//`同步更改数据`

/**

* 添加商品到购物车的方法

* 其中参数1固定的,就是代表我们的state

* 参数2:商品信息的对象

*/

addGoods(state,goodsObj){

//console.log("添加商品到购物车")

//console.log(goodsObj)

//goodsObj ==> {goodsId:87,count:3}

state.goodsList.push(goodsObj)

//console.log(state.goodsList)

},

deleteGoodsById(state,goodsId){

for(var i = state.goodsList.length-1 ;i>=0;i--){

if(goodsId==state.goodsList[i].goodsId){

state.goodsList.splice(i,1)

}

}

}

},

actions: {//`异步更改数据`

//可以认为是$store对象

addGoodsAction(context,goodsObj){

//调用mutations

context.commit('addGoods',goodsObj)

}

}

})

//创建根实例,到时候,Vue去解析id=app的div

new Vue({

el:"#app",

router,

store,

render:function(createElement){ //项目一启动之后,呈现给用户的第一个组件

return createElement(App)

}

})

3.  app.vue  是主页面,所有的html视图会集合到这里来,用到的技术点

1.使用mint-Ui的header模块就可以了固定header部分了

2.使用v-show指令是否隐藏或者显示 返回按钮

1.当变量 isShowBack=true的时候让其显示,否则隐藏

2.当点击返回的时候调用 goBack() 函数  this.$router.go(-1)回退功能

3.当组件创建的时候调用函数 this.isShowOrHidden(this.$route.path)

函数isShowOrHidden(path)判断path的值来改变 isShowBack的值

3.中间内容,通过路由匹配视图标签,路由变化的值在这里显示

4.底部内容使用mint-Ui的Tabbar模块来进行排版

5.使用三元表达式来判断底部是否隐藏

:class="isShowTabBar ? '' : 'tabBarStyleHidden' "

6.使用 来进行超链接调转,它的底层最终会变成

{{myCount}}

// scoped代表样式私有

.backStyle{

z-index: 2;

position: fixed;

left:15px;

top:10px;

font-size: 14px;

color: #fff;

font-weight: 900;

}

.tabBarStyleHidden{

display: none;

}

img{

width:42px;

height: 35px;

}

.mint-tabbar>.mint-tab-item.is-selected{

background-color: #fafafa;

}

.badgeStyle{

font-size: 11px;

line-height: 1.3;

position: absolute;

top: 7px;

left: 63%;

text-align: center;

padding: 1px 5px;

color: #fff;

border-radius: 11px;

background: red;

}

//导入公共的Vue对象

import bus from './common/commonvue.js'

export default{

data(){

return {

isShowTabBar:true,

isShowBack:false,

myCount:0

}

},

methods:{

goBack(){

this.$router.go(-1)

},

isShowOrHidden(path){

if(path=="/home"){

this.isShowTabBar = true

this.isShowBack = false

}else{

this.isShowTabBar = false

this.isShowBack = true

}

}

},

created(){

this.isShowOrHidden(this.$route.path)

//监听加入购物车的动作

// bus.$on('goodsCount',function(count){

// this.myCount+=count

// }.bind(this))

},

updated(){//当仓库的值,发生更改,同样会调用这个方法

this.myCount = this.$store.getters.getGoodsCount

},

watch:{

/**

"$route":(newValue,oldValue)=>{

console.log(this)

if(newValue.path=="/home"){

this.isShowTabBar = true

}else{

this.isShowTabBar = false

console.log(this.isShowTabBar)

}

}

*/

"$route":function(newValue,oldValue){

this.isShowOrHidden(newValue.path)

}

}

}

Logo

前往低代码交流专区

更多推荐