> # ♻️ 资源
> **大小:** 3.81MB
> **文档链接:**[**https://www.yuque.com/sxbn/ks/100010164**](https://www.yuque.com/sxbn/ks/100010164)
> **➡️ 资源下载:**[**https://download.csdn.net/download/s1t16/87301521**](https://download.csdn.net/download/s1t16/87301521)
> **注:更多内容可关注微信公众号【神仙别闹】,如当前文章或代码侵犯了您的权益,请私信作者删除!**
> ![qrcode_for_gh_d52056803b9a_344.jpg](https://cdn.nlark.com/yuque/0/2023/jpeg/2469055/1692147256036-49ec7e0c-5434-4963-b805-47e7295c9cbc.jpeg#averageHue=%23a3a3a3&clientId=u8fb96484-770e-4&from=paste&height=140&id=u237e511a&originHeight=344&originWidth=344&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=8270&status=done&style=none&taskId=ud96bf5f7-fe85-4848-b9c2-82251181297&title=&width=140.1999969482422)
#### 项目描述
一个基于优鲜食物的移动端购物网站(大部分功能模块已实现,适合有一定 Vue 基础的人学习,项目实施需要的资源已经放在素材文件夹下,包括接口文档、图片资源等)
#### 技术栈
Vue CLI + Vue Router + Vuex + Less + Mint UI + axios + Swiper + Animate + Better Scroll + Mock + Vue Touch
### 项目展示(此处只列举部分)
1. 首页
![](https://img-blog.csdnimg.cn/20190629191039811.png#height=533&id=oMQ50&originHeight=793&originWidth=446&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&title=&width=300)
2. 城市选择
![](https://img-blog.csdnimg.cn/20190629154417256.png#height=533&id=M6DnS&originHeight=793&originWidth=446&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&title=&width=300)
3. 购物车
![](https://img-blog.csdnimg.cn/20190629154517729.png#height=530&id=XsPBu&originHeight=790&originWidth=447&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&title=&width=300)
4. 商品详情
![](https://img-blog.csdnimg.cn/20190629154600756.png#height=534&id=TrJp9&originHeight=791&originWidth=444&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&title=&width=300)
5. 个人中心
![](https://img-blog.csdnimg.cn/20190629154637568.png#height=533&id=ezlrB&originHeight=785&originWidth=442&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&title=&width=300)
6. 收获地址
![](https://img-blog.csdnimg.cn/20190629154710992.png#height=532&id=gEgl9&originHeight=793&originWidth=447&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&title=&width=300)
### 基本使用
#### 使用 less
```javascript
cnpm install less less-loader -S-D
```
#### 使用 swiper
```javascript
cnpm install swiper -S-D
//在组件中引入
//引用swiper
import Swiper from 'swiper'
//引入css文件
import 'swiper/dist/css/swiper.min.css'
//然后在挂载的时候初始化swiper
mounted() {
this.nextTick(() => {
this.scroll = new Swiper('.swiper-container', {
autoplay: true,
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
})
})
}
```
#### 使用 mint-ui
```javascript
cnpm install mint-ui -S
cnpm install babel-plugin-component -S-D
```
打开.babelrc 进行配置,在 plugin 插入一项配置,例如:
```javascript
"plugins": ["transform-vue-jsx", "transform-runtime", ["component", [
{
"libraryName" : "mint-ui",
"style": true
}
]]]
//此处是插入了component这个
```
使用:
```javascript
main.js中import 'mint-ui/lib/style.css'
import {Navbar, TabItem} from 'mint-ui'
```
### 使用 vuex
```javascript
cnpm install vuex -S
```
创建 store 文件夹
```javascript
- index.js
- state.js
- getters.js
- mutation-types.js
- actions.js
- mutations.js
```
需要注意:每个.js 文件写的时候都需要注意导出 export default{} 或 export const ....
并且 state getters actions mutations 都是有多个 每个间要用,号隔开,在 index.js 中分别引入(import)state.js getters.js actions.js mutations.js vue vuex
使用 vuex Vue.use(vuex),创建 vuex
```javascript
export default Vuex.Store({
state,
getters,
actions,
mutations,
})
```
在 main.js 中为 vue 实例挂载 vuex,引入 store/index.js,在实例中挂载。
### 使用 animate.css
```javascript
cnpm install animate.css
```
在 main.js 中引入
```html
import animate from 'animate.css'
```
在页面中使用
```javascript
<transition enter-active-class="animated fadeIn"></transition>
```
### 使用 better-scroll
使用 better-scroll 实现各种滚动效果
```html
npm install better-scroll -S
```
具体使用看[官方文档](https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/installation.html#npm)
```html
this.$nextTick(() => {
if(!this.scroll) {
this.scroll = new BScroll(this.$refs.wrapper, {
click: true
})
} else {
this.scroll.refresh()
}
})
```
需要注意的是子元素的高度一定要大于父元素的高度,子元素设置超出隐藏
### 跨域访问接口
正常情况下,要实现跨域,是通过后台进行配置响应的响应头的参数。
vue-cli 则跨域通过 node.js 代理服务器实现跨域请求。
文件路径 config/index.js
```html
proxyTable: {
'/api': { // 匹配所有以 '/api'开头的请求路径 即匹配的是axios中传入的url参数,/api/user 这种形式才会匹配
target: 'http://d.apicloud.com/mcm/api', // 代理目标的基础路径
changeOrigin: true, // 支持跨域
pathRewrite: {// 重写路径: 去掉路径中开头的'/api' 当真正的接口不需要api时重写
'^/api': '' //去掉匹配到的路径的/api 如果不去掉就删除pathRewrite
}
}
}
//最后得到的路径就是 target+url
//假设请求的url为 /api/user
//经过node.js代理后 真正请求的是 http://d.apicloud.com/mcm/api/user
//需要注意的是F12显示的仍然是localhost:8080/api/usesr 但实际上发送的地址是经过node.js代理服务器实现的跨域请求
请求头
const instance = axios.create({
baseURL: '/api',
timeout: 1000,
headers: {
'X-APICloud-AppId': 'A6914327011091',
'X-APICloud-AppKey': '8ac17d22e49cb7982d82796097cec52a6c7cd01d.1475375422841'
}
})
//get请求
promise = instance.get(url)
//post请求
promise = instance.post(url)
```
### 关于浮点数计算的问题
```javascript
state.totalPrice = parseFloat((state.totalPrice + food.price).toFixed(2))
```
需要注意:不能直接(state.totalPrice + food.price).toFixed(2),因为 toFixed() 返回一个数值的字符串表现形式。
### 首页左右滑动效果
组件用的是 mint-ui 提供的当时 存在一个问题 它只提供了滑动效果 不会和 tab 动态的关联起来,所以借助了 vue-touch。
vue-touch 使用:
```javascript
cnpm install vue-touch@text
```
main.js 绑定 vue
```javascript
import VueTouch from 'vue-touch'
Vue.use(VueTouch, {name: 'v-touch'})
```
FoodList 中使用
```javascript
<v-touch @swipeLeft=""></v-touch> //从左往右滑动
<v-touch @swipeRight=""></v-touch> //从右往左滑
绑定事件,使用this.$emit('v-swipeLeft') //自定义事件
```
Home 中使用
```javascript
<FoodList @v-swipeLeft=""/>
```
绑定事件
```javascript
触发nav的updateSelectedIndex事件
通过this.$refs.nav.updateSelectedIndex(更改的下标) //要先给nav绑定ref="nav"
```
优化建议:是否可以通过 watch 监听 navBar 的下标变化,如果变化了,在 this.$nextTick 中执行初始化方法。
### mockjs 图片资源
安装:
```javascript
cnpm install mockjs -S
```
在 mock 文件目录下新建 data.js ,格式: JSON 数据类型。
```javascript
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
详情介绍:https://www.yuque.com/sxbn/ks/100010164 一个基于优鲜食物的移动端购物网站。 技术栈:Vue CLI + Vue Router + Vuex + Less + Mint UI + axios + Swiper + Animate + Better Scroll + Mock + Vue Touch
资源推荐
资源详情
资源评论
收起资源包目录
基于VUE实现的优鲜食物的移动端购物网站【100010164】 (316个子文件)
.babelrc 519B
api.css 2KB
reset.css 2KB
identify.css 642B
.editorconfig 147B
order_ware.gif 22KB
order_ware.gif 22KB
order_ware.gif 22KB
order_ware.gif 22KB
order_ware.gif 22KB
loading_more.gif 6KB
loading_more.gif 6KB
.gitkeep 0B
customservice_frame.html 12KB
order_frame.html 11KB
main_frame.html 6KB
setaddress_frame.html 6KB
recharge_frame.html 5KB
shoppingcart.html 4KB
personalcenter_frame.html 4KB
ware_frame.html 4KB
shoppingcart_frame.html 4KB
account.html 4KB
address_frame.html 4KB
coupon_frame.html 4KB
main.html 4KB
myorder_frame.html 3KB
setaddressdetail_frame.html 3KB
myorder.html 3KB
ware.html 3KB
message_frame.html 3KB
personalcenter.html 3KB
order.html 3KB
coupon.html 3KB
setting_frame.html 2KB
about.html 2KB
login_frame.html 2KB
cityselector_frame.html 2KB
exchange_frame.html 2KB
share_frame.html 2KB
setaddress.html 2KB
minicart_frame.html 2KB
about_frame.html 2KB
register_frame.html 2KB
address.html 1KB
login.html 1KB
balancehelp.html 1KB
customservice.html 1KB
message.html 1KB
balancehelp_frame.html 1KB
register.html 1KB
setting.html 1KB
setaddressdetail.html 1KB
index.html 955B
billhistory_frame.html 653B
main.jpg 419KB
default_square.jpg 14KB
api.js 18KB
APICloud-rest.js 9KB
webpack.prod.conf.js 5KB
actions.js 4KB
SHA1.js 4KB
doT.min.js 3KB
mutations.js 3KB
webpack.dev.conf.js 3KB
utils.js 3KB
index.js 2KB
webpack.base.conf.js 2KB
state.js 2KB
index.js 2KB
main.js 1KB
ajax.js 1KB
check-versions.js 1KB
build.js 1KB
index.js 805B
mutation-types.js 780B
vue-loader.conf.js 553B
mockServer.js 446B
index.js 326B
.postcssrc.js 246B
dev.env.js 172B
test.env.js 149B
prod.env.js 77B
getters.js 0B
package.json 3KB
data.json 2KB
LICENSE 1KB
README.md 8KB
server-api.pdf 53KB
banner1.png 163KB
banner1.png 163KB
56c80dc88d04c83d3d1dedf3.png 163KB
56c80db78d04c83d3d1dedea.png 163KB
56c80dc031da9e480de1cb49.png 163KB
56c80dc383af652643474b6d.png 163KB
56c80dc88d04c83d3d1dedf3.png 163KB
56c80db78d04c83d3d1dedea.png 163KB
56c80dc031da9e480de1cb49.png 163KB
56c80dc383af652643474b6d.png 163KB
banner2.png 150KB
共 316 条
- 1
- 2
- 3
- 4
资源评论
神仙别闹
- 粉丝: 2674
- 资源: 7640
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功