1,配置环境
npm、node以及安装淘宝镜像，创建vue脚手架
npm config set registry https://registry.npm.taobao.org
npm install -g @vue/cli (全局安装@vue/cli )
vue create xxx （切换到你要创建的项目目录，使用命令进行项目创建）
npm run serve (运行项目，前提是在创建目录之下)
cnpm install –save less less-loader@5 (安装less样式)
首次运行时报错
解决办法：在vue.config中加入
components文件夹：经常放置一些非路由组件或者全局组件
pages|views文件夹：经常放置路由组件
2，路由配置过程
首先安装路由插件cnpm install –save vue-router(可以在package.json中查看有无vue-router)
运行路由组件报错：
export ‘default’ (imported as ‘VueRouter’) was not found in ‘vue-router’ (possible exports: NavigationFailureType, RouterLink, RouterView, START_LOCATION, createMemoryHistory, createRouter, createRouterMatcher, createWebHashHistory, createWebHistory, isNavigationFailure, loadRouteLocation, matchedRouteKey, onBeforeRouteLeave, onBeforeRouteUpdate, parseQuery, routeLocationKey, routerKey, routerViewLocationKey, stringifyQuery, useLink, useRoute, useRouter, viewDepthKey)
原因：版本不兼容，版本过高，下载旧版本即可
解决方法： cnpm install vue-router@3.1.3 –save-dev
1），在mian.js中注册router，所有组件都拥有$route、$router属性
$route：一般获取路由信息，比如路径、query参数、parmas参数
parmas参数：属于路径中的一部分，一般需要占位，
query参数：不属于路径中的一部分，不需要占位，形式式：?….
$router：一般进行编程式路由导航的跳转,比如push、replace等等
2），路由跳转：声明式路由导航(router-link)、编程式导航(push|replace)
3），利用路由元信息可以判断或者控制某个组件的显示或隐藏
4），路由传参
第一种：字符串写法:params+query参数
this.$router.push(‘/sreach/’+this.keyWord+”?k=”+this.keyWord.toUpperCase());
第二种：模板字符串
this.$router.push(`/sreach/${this.keyWord}?k=${this.keyWord.toUpperCase()}`)
第三种：对象（前提是路由有名字）
this.$router.push({
name:”sreach”,
params:{word:this.keyWord},
query:{k:this.keyWord.toUpperCase()}
})
5），对象写法中path能否和parmas参数一起使用？
不能，对象中可以使用path或者name的形式，但是path不能和parmas参数搭配使用，显示query参数，但是不显示params参数
6），如何指定params参数可传可不传？
假若路由中已经占位，但是不传递参数，你就会发现URL有问题，跳转至哪个路由路径不显示了，解决可传可不传，只需要在路由占位时，后面加上?即可
7），params参数可以传递也可以不传递，如果传递的是空串，该如何解决？
在params参数后面或上undefined
8），路由组件能不能传递props参数？可以的
3，服务器及其接口配置
1），安装axios： cnpm install –save axios
2），通常api文件夹放置axios请求，request.js主要对axios进行二次封装，index.js主要实现对接口的统一配置
3），加载数据或者获取数据时，进度条的显示
cnpm install –save nprogress（安装）
4，vuex的使用
1），安装：cnpm install –save vuex
2），vuex是官方提供的一个插件，状态管理库，集中式管理项目中组件共用数据
3），在store文件夹下新建index.js文件，别忘记在main.js中引入和注册
state:仓库存储数据的地方
mutations:修改state的唯一手段
actions:处理action，可以书写自己的业务逻辑
getters：计算属性，用于简化仓库数据
4），获取不到仓库数据，数据显示
原因是版本不兼容，下载对应版本号，不必太高：
cnpm install –save vuex@3.6.2
5），vuex仓库
5，总结归纳
1，鼠标移上去才有背景色：写动态类名–:class=”{cur:currentIndex==index}”
2，动态展示，鼠标移上显示：写动态样式–:style=”{display:currentIndex==index?’block’:’none’
3，演示卡顿现象，用户操作过快，数据来不及加载—-函数的防抖与节流
防抖：前面的触发都被取消，最后一次在规定时间内才会触发，也就是如果连续快速的触发，只会执行一次
节流：在规定时间内不会重复触发，只有大于时间间隔才会触发，把频繁触发变为少量触发 
4，TypeNav组件
点击一级、二级以及三级标签，跳转至另一组件，但是给每个标签写点击事件又太繁琐，这时候给它最近的父元素绑定单击事件，利用编程式导航+事件委派实现(但是怎么才能知道点击哪个标签传递什么参数呢)
利用自定义属性
区分哪个标签—:data-categoryName=”c1.categoryName(:data-categoryName=”c2.categoryName)
区分几级标签—:data-category1Id=”c1.categoryId（:data-category2Id=”c2.categoryId）
5，如何解决跨域问题？
jsonp以及反向代理服务器
6，在三级联动中派发函数，向服务器中获取数据，可不必再其本身组件上派发，因为它是个全局组件，每挂载一次就会执行，咱们在main.js中去派发请求，使home仓库中有数据，而且只执行一次，直接去home仓库中要数据即可
注意！！！不能放在main.js中，因为this.$store.dispatch(“categoryList”);中的this啥也不是，身上也没有$store属性，只有组件才有
7，注意路由跳转是$router，有无属性的是$route
this.$router.push(location); this.$route.query
8，mock模拟接口
cnpm install mockjs（注意json中涉及到的图片要放入public中）json的数据默认是对外暴露的，最后再main.js中引入(import ‘@/mock/mockServe’;)
9,轮廓图
swiper.com.cn–中文教程有基本使用方法–在new swiper样式之前，页面的结构必须要有—安装版本5最好( cnpm install –save swiper@5)
轮廓图数据是从服务器中获取，然后动态渲染的，v-for进行遍历，此时要想保证 new swiper样式之前页面有结构，需用到watch+$nextTick:在下次dom更新完，循环结束之后立即执行
9，只有页面派发action请求后，相应的仓库才会获取数据，只有从仓库中得到数据后，相应的组件身上才有相对应的数据
10，getters计算属性的时候，需要考虑仓库中的数据是否存在，数据状态有两种，一种空数组或空对象，另一种数据已存在，为避免有bug，我们在获取数据的时候加上空数组或者空对象goodList(state){ return state.sre.goodsList || [ ] }
11，由于sreach组件要请求多次，所以派发action的时候不应再mounted中派发，因为函数是定义一次，多次调用的，咱们可以利用函数来实现 mounted(){ this.getDate(); } —
methods:{
//向服务器发送请求获取sreach模块数据（根据参数不同展示不同数据）
getDate(){
this.$store.dispatch(‘sreachlist’,{});
}
12，向服务器中带参数的，而且还是多个，咱们可以使用响应式数据来传参
13,
是因为仓库一开始是空对象，去找相应的数据没有，会进行错误提示，为了更严谨一点
14，
可以先进行测试一下
15，进行路由跳转时，之前前一组件已经获取到仓库中的数据（目前只考虑query参数，通过query传递一简单参数）不想服务器发送请求，也不通过query传参，
想到浏览器的本地存储和会话存储，—复杂的产品信息，咱们通过会话存储(不持久化)，但是二者都不能存储数据的对象形式，一般存放的时候字符串，利用json把对象转化为字符串
sessionStorage.setItem(‘SKUINFO’,JSON.stringify(this.skuInfos))
接收组件中
16，去购物车结算的时候，需要知道用户的身份，不然服务器给你返回的数据是null–通过请求头传递给服务器，先临时使用游客身份，需要持久化存储身份–可以参考uuid_token
17,在css样式中，也可以使用@，代表的是src，但是注意的是需要在前面加上~（~@）
18,导航守卫：导航–就是你跳转至哪个路由组件，守卫–限制条件
守卫-全局守卫：只要在组件中，只要路由发生变化，就可以监听到
19,包括js文件，都不需要用this
20，js文件中引入store，使用的时候就不必用this.$store——————————————————– let name=store.user.info.name; await store.dispatch(‘getuserinfo’
let name=store.state.user.info.name;
let token=store.state.user.token; try {
//没有用户信息，去获取用户信息
await store.dispatch('getuserinfo');
next()
} catch (error) {
//获取不到用户信息，重新登录
await store.dispatch('userlogin');
next('/login')
}21，假若获取数据不使用vuex，
在main.js 中引入所有api中的函数，API可以获取到api中所有接口，并把API放入vue的原型对象上，所有组件都可以直接使用，再次引用的时候就不用带vue了
import * as API from '@/api'
console.log(API)beforeCreate(){
Vue.prototype.$bus=this;
Vue.prototype.$API=API;
},在组件中使用方法
submitorder(){
this.$API.reqcommitrade()
}
},