尚优品开发项目记录，本次记录仅当作个人总结
使用的编辑器为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是一个插件 所以在使用插件的时候 需要uesVue.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
//首先先引入axiosimport 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){mit('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}})
