哔哩哔哩-尚优品项目开发记录

尚优品开发项目记录，本次记录仅当作个人总结

使用的编辑器为Vscode 版本为vue2 目前使用到的技术栈有 vue-router、vuex、axios

element-ui

首先创建一个Vue2项目 --通过cmd 创建Vue2项目 vue create vue2-SUP ，直接选择vue2的默认配置

main.js是程序的入口文件

App.vue是唯一的根组件

关闭el语法检查再vue.config.js里面配置 LintOnSave:false 即可关闭语法检查

1.开发项目的步骤：

1）根据UI设计图书写静态页面 html+css

2）根据需求拆分组件

3）获取服务器的数据，动态展示

2.路由组件的搭建 vue-router

vue2版本安装vue-router npm install vue-router@3 vue2的项目需要加版本号

vue3则可以直接安装 npm install vue-router

路由组件一般放在pages|view文件夹中，在src低下创建pages文件夹，往里创建相应的路由组件

2.1配置路由

路由的配置在router文件夹中

需要引入Vue ，vue-router

import Vue from 'vue'
import VueRouter from 'vue-router'
//vue-router是一个插件 所以在使用插件的时候 需要ues
Vue.use(VueRouter)exoprt default new VueRouter({routers:[{path:'/Home',component:Home}]})

然后需要到main.js中去配置路由信息

import router from '@/router'new Vue({router
}).$mount('#app')

路由跳转分为两种，

一种是声明式导航，

<router-link to='/login'>登录</router-link>

一种是编程式导航

this.$router.push('/home')
//或者是使用
this.$router.replace('/home')

就可以进行路由跳转了

3.发送异步请求通过axios ------- npm install axios

通过二次封装axios的方式进行发送请求,为什么二次封装axios？？因为随着项目的规模不断扩大，如果每次发起一次HTTP请求就要把发送请求的配置项都写一遍例如请求头，超时时间，错误处理等，所以为了提高代码质量建议二次封装axios

写好一个request.js文件用于封装axios

//首先先引入axios
import axios from 'axios'const requests = axios.create({baseURL:'/api',timeout:3000
})//配置响应器和拦截器
requests.intercepors.request.use(config=>{return config
})requests.interceptors.response.use(response=>{return response.data
}.err=>{return Promise.reject(err)
})export default requests

然后在写一个index.js文件对API进行统一的管理发送请求时需要用到封装的axios

import requests from './request'//将api对外暴露 让别的模块也能用
export const reqCategoryList = () =>request.get('/product/getBaseCategoryList')

如果项目很小，就几个组件完全可以在组件的生命周期函数中去发送请求，如果项目很大，就需要接口统一管理

发送请求的时候会出现跨域问题，

什么是跨域？当客户端和服务器的协议，域名，端口号不同的时候就会出现跨域问题。

怎么处理跨域？通常用JSONP CROS 和代理的方式

以下是通过代理的方式来处理跨域问题，在webpacak中有一个devServe配置到vue.config.js用来处理跨域问题.

 devServer:{proxy: {"/api": {//请求地址target: "http://39.98.123.211",pathRewrite: {"^/api" : ""}}}}

4.Vuex仓库化存储数据

vuex用于集中式管理项目中的组件共用的数据，项目很大，组件很多，组件间通信就用vuex 用于集中式管理数据

第一步创建一个store文件夹还有一个index.js的文件

第二步安装插件 npm install vuex@3.6.2

第三步引入vue vuex

第四步需要在main.js中使用store

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.store({//里面有 state 用于存放数据 state里面的初始值不能乱写 要看服务器返回的是对象还是数组const state ={sum:0},//action 用于处理业务逻辑const actions = {jia(context,value){context.commit('JIA',value)}},//mutations 用于修改state里面的数据const mutations = {JIA(state,value){state.sum +=calue}}//getters 类似于计算属性 getter里面需要有返回值 就跟计算属性一样const getters = {bieSum(state){return state.sum * 10}}})其他组件需要拿到数据例如
import {mapState} from 'vuex'
computed:{...mapState(['count']) 然后在view中直接用就可以了
}

也可以通过module的方式将大仓库变成多个小仓库然后一个一个引入到index.js的module当中当中

例如 创建一个home小仓库 里面写好配置项
const state = {}
const mutations = {}
const actions = {}
const getters = {}
export default{state,mutations,actions,gerrets
}在大仓库中 首先先要引入小仓库
import home from './home'
export default new Vuex.Store({modules:{home}
})

哔哩哔哩-尚优品项目开发记录相关推荐

尚硅谷前端项目开发笔记
尚硅谷前端项目开发笔记 B站视频直达,这个项目亮点在于所有 API 请求都并非在组件内编写,而是在组件内使用this.$store.dispatch() 派发任务,再由 Vuex(actions.mu ...
尚硅谷——谷粒商城项目开发记录——2021.11.19
尚硅谷--谷粒商城项目开发记录--2021.11.19 出现错误 1.SpringBoot测试类出现Could not autowire. No beans of 'BrandService' typ ...
尚硅谷——谷粒商城项目开发记录——2021.11.22
尚硅谷--谷粒商城项目开发记录--2021.11.22 概念: 1.对象优化: 新增的API: ES6 给 Object 拓展了许多新的方法,如: keys(obj): 获取对象的所有 key 形成的 ...
尚硅谷——谷粒商城项目开发记录——2021.11.21
尚硅谷--谷粒商城项目开发记录--2021.11.21 概念: 1.var和let的区别: 作用域: var 声明的变量往往会越域 let 声明的变量有严格局部作用域声明次数: var 可以声明多次 ...
尚硅谷——谷粒商城项目开发记录——2021.11.20
尚硅谷--谷粒商城项目开发记录--2021.11.20 概念: 1.SpringCloud Alibaba: 简介: Spring Cloud Alibaba 致力于提供微服务开发的一站式解决方案.此 ...
Anytime项目开发记录0
Anytime,中文名:我很忙. 开发者:孤独的猫咪神. 这个项目会持续更新,直到我决定不再维护这个APP. 2014年3月10日:近日有事,暂时断更.希望可以会尽快完事. 2014年3月27日:很抱 ...
TMS320F28335项目开发记录9_28335之中断系统
TMS320F28335项目开发记录9_28335之中断系统 2014年11月08日 12:00:12 阅读数:3104 28335中断系统 1.中断系统在这里我们要十分清楚DSP的中断系统.C28 ...
品优购项目学习记录--01公共模块制作
文章目录一.品优购项目规划 1.1 开发工具以及技术栈 1.1.1 开发工具 1.1.2 技术栈 1.2 品优购项目搭建工作 1.2.1 相关文件夹以及文件创建 1.2.2 模块化开发 1.2.3 ...
vue-music（1）音乐播发器项目开发记录
Vue-Music 跟学一个网课老师做的仿原生音乐APP跟学的笔记,记录点滴,也希望对学习vue初学小伙伴有点帮助一| 前期工作 1.项目初始化 npm install -g vue-cli vue ...

哔哩哔哩-尚优品项目开发记录

哔哩哔哩-尚优品项目开发记录相关推荐

最新文章

热门文章