哔哩哔哩-尚优品项目开发记录
尚优品开发项目记录，本次记录仅当作个人总结
使用的编辑器为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
}
})