概述
注意事项:
因为webpack使用不达标，所以用了VueCLI搭建项目引入MintUI组件库
全部组件引入（不好：所有的组件全部下载，实际开发中有很多用不到，浪费内存）
import MintUI from 'mint-ui'
Vue.use(MintUI)
import 'mint-ui/lib/style.css'//样式表都得引入
按需使用（推荐：需要什么，引入什么）
import 'mint-ui/lib/style.css'//样式表都得引入
import { Header } from 'mint-ui'//引入需要的组件
//按需引入需要对应的loader Babel 两套包来实现
//cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
//cnpm i bable-preset-env babel-preset-stage-0 -D
Vue.component(Header.name,Header)//对引入的组件进行注册为全局组件
这里的问题：不会用按需使用，一直出错，还要下插件，索性不用了，直接用全部组件吧，webpack有个生产模式，打包后能将没用到的函数，debug去点，希望能将用不到的组件清理~~。
引入MUI
mui是一个类似bootstrap的库，不向MintUI只能在Vue中使用。
//导入MUI 的样式
import '../src/lib/MUI/css/mui.min.css'
import '../src/lib/MUI/css/icons-extra.css'
import '../src/lib/MUI/fonts/mui-icons-extra.ttf'
第一个是MUI的css样式表，
第二个是MUI的图标拓展css样式表，
第三个是文字css样式配合底部的购物车图标显示使用。
引入路由
可以直接引入本地的vue-router.js文件
也可以用 npm 下载，下载完在node_modules
cnpm i vue-router
import VueRouter from 'vue-router'//名随便起
//使用路由
Vue.use(VueRouter);//引用上面起的名
要注意的是 router交给vue实例，跟着视频课的老师敲一步一错，急了半天，在网上看到的一种使用方法，跟视频课中看到的使用方法不同，最后还是上网上搜索解决了问题，以后遇到问题试了几次还报错，就不要一直使用一种方式，可以上网查，或者。。或者。。
new Vue({
router:new VueRouter({
routes:[
{path:"/home"},
{path:"/mrmber"},
{path:"/shoopcar"},
{path:"/search"}
]
}),
render: h => h(App),
}).$mount('#app')
原来是这样的
new Vue({
render: h => h(App),
}).$mount('#app')
不知道这样做的原理，自己认为的有净是bug，就按着这种方式去理解吧，在这纪律一下，以后别再忘了。
使用MintUI一个Header组件搭建项目的头部区域
用MUI的tabbar搭建项目的底部区，两个现成的小组件吧引入页面后：
用了组件感觉确实十分的方便，很轻易的就做出了效果，效果斐然，继续
利用linkActiveClass属性设置底部图标点击高亮
router:new VueRouter({
routes:[
{path:"/home"},
{path:"/mrmber"},
{path:"/shoopcar"},
{path:"/search"}
],
linkActiveClass:'mui-active',
//mui-active是底部图标高亮样式，让点击哪个图标就给谁这个样式，但不知道为什么上一个这个样式是怎么去掉的，也许这就是不求甚解吧
}),
在引用组件的时候遇到了一个混淆tab与空格的错，意思是一行代码同时用了tab缩进和空格，不符合语法规范，会报错，解决方法是在那段代码之前加上下面这局话，或者更简单的重拍代码结构webstorm是快捷键Ctrl + Alt + L，一个小插曲吧，也是意外收获。^ | ^
/* eslint-disable */
创建4个对应底部tabbar的组件，引入
/导入tabber对应的4个组件
import HomeComponent from '../src/components/tabbar/HomeComponent.vue'
import MemberComponent from '../src/components/tabbar/MemberComponent.vue'
import ShooppingcarComponent from '../src/components/tabbar/ShooppingcarComponent.vue'
import SearchComponent from '../src/components/tabbar/SearchComponent.vue'
``
设置路由路径对应的组件
```js
router:new VueRouter({
routes:[
{path:"/home",component:HomeComponent},
{path:"/mrmber",component:MemberComponent},
{path:"/shoopcar",component:ShooppingcarComponent},
{path:"/search",component:SearchComponent}
],
linkActiveClass:'mui-active',
//mui-active是底部图标高亮样式
}),
Home组件中的轮播图组件,就是这报的混淆tab键与空格的
<mt-swipe :auto="4000">
<mt-swipe-item>1</mt-swipe-item>
<mt-swipe-item>2</mt-swipe-item>
<mt-swipe-item>3</mt-swipe-item>
</mt-swipe>
Home组件的数据获取：
不会用vue-resource，就用axios了，而且Vue更新到2.0之后宣告不再对vue-resource更新，推荐使用axios，更有理由用自己用过的技术了haha
cnpm i axios
想着挺好，使用axios解决，他没问题啊，刚安装好就报错~
在网上看了个有趣的回答，哈哈：
然后再接着干????
条件有限，自己写一个json数据吧，获取三组数据每组数据中包含一个图片的地址和链接供点击时前往，上网随便找个图片链继的凑合着用吧
wofack，写这句话，距离上面一句隔了一个晚上加上一个早晨，
这个axios引用本地的json文件一直出错，一直404.把axios，fetch跟ajax都试了一遍，都不好使，最后上网查到，vuecli3.0中的静态文件都应放在指定的static文件中，否则打包时会怎么怎么样的我也理解不了，反正就是在public文件下建一个static的文件夹放置静态文件，好了，问题解决，继续，对了引用的时候要用绝对路径：/static/swipe.json
数据拿到，放到轮播图的图片src属性,和a链接点击跳转的链接
<mt-swipe :auto="4000">
<mt-swipe-item v-for="(item,index) in list" :key=index>
<a :href="item.url"><img :src="item.src" alt="No"></a>
</mt-swipe-item>
</mt-swipe>
点击图片即到了我爱的lol，等做完这个小项目，必须去召唤师峡谷大战一场
在做六宫格的时候遇到点小麻烦，经常下载图标的网站让我冲会员，那能干吗，直接Ctrl + Shift +c，下载到本地自己去ps扣，一样高傲，从来不充钱，偷完就走，继续
用一个MUI提供的九宫格组件改成六宫格的，再把抠出来的图片放到上面，样式微调，Home页页面差不多了
路由重定向，进入跟路径直接进入home页
{path:"/",redirect:'/home'},
{path:"/home",component:HomeComponent},
然后给组件间切换加个动画
<transition>
<router-view></router-view>
</transition>
//样式
.v-enter{
opacity: 0;
transform: translateX(100%);//进入时从右侧屏幕宽度位置进入
}
.v-leave-to{
opacity: 0;
transform: translateX(-100%);//进入时从左侧屏幕宽度位置出去
position: absolute;//防止两个组件同时出现宽度增加，出现底部滚动条，让出去的组件绝对定位
}
.v-enter-active,.v-leave-active{
transition: all 0.5s ease;//0.5秒过渡
}
效果：右进左出
先到这，当做第一部分吧
最后
以上就是虚拟含羞草为你收集整理的VueCLI商城项目开发纪实day.1的全部内容，希望文章能够帮你解决VueCLI商城项目开发纪实day.1所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复