项目总流程

前提已安装：node + webpack + cnpm

1、vue-cli脚手架初始化项目。      vue create appname

2、安装所有依赖包。         npm i  

3、项目配置  ：

                （1）  --open  启动后，自动打开浏览器，在package.json中

                （2） lintOnSave:false;  关闭校验功能，在vue.config.js中

                （3） src/ 文件路径简写 @/ ，在jsconfig.json中

4、sass目录结构设置

    （1）创建assets/sass/index.scss   具体步骤查看：Sass安装 ,配置...

5、路由分析：

        非路由組件：在component文件中，创建组件+ 父组件引用+注册+模板中使用

        路由组件：在views中，安装+导入+路由配置+使用理由导航 。操作如下：

                  Vue2 路由组件：vue-router 使用？_yuroll的博客-优快云博客                  vue3 路由组件：vue-router 使用？_yuroll的博客-优快云博客

 注册完后，组件(路由组件&非路由组件) 身上都有$router、$route

$router:  一般进行编程式路由跳转。$router.push('/')      $router.replace('/')

$route:  一般获取路由信息【路径、query、parmas等】

6、组件的显示与隐藏：

 如何控制？：使用 v-show + meta 路由元信息

      操作请查看：https://blog.youkuaiyun.com/yuroll/article/details/129590854

7、路由的跳转：

        声明式导航：  <router-link> （务必要有to属性） 最终转为 <a> 标签

        编程式导航.    若非<a>标签跳转，需要button或其他跳转，就要用编程式，利用

                                $router.push|replace方法来实现。编程式跳转可以+业务逻辑代码

        操作查看：路由跳转 & 路由传参数_yuroll的博客-优快云博客

8、路由传参：

       params传参：属于路径的一部分。配置路由映射关系时，需要占位  查看更多params

       query传参：不属于路径的一部分。不需要占位     查看更多query

       若让路由组件更方便收到参数  查看更多 props

9、解决多次路由编程式跳转（同一个参数），抛出的问题

       点击查看如何解决？

10、路由组件模块，加载数据

        1、设置静态页面，拆分静态组件

        2、获取服务器的数据进行展示：Axios二次封装   -->   API统一管理接口  -->  main.js引用  -->  出现跨域问题并解决    -->  进度条功能展示    -->vuex模块化开发教程    -->  vuex获取并存储的公共数据vuex模块化开发教程   -->  组件中，通过...mapState获取数据并模板展示

         3、动态业务:  js动态实现添加背景颜色   -->  js动态实现二三级联动显示和隐藏  -->  lodash 实现category节流    -->   三级联动路由传参数跳转（事件委派+自定义属性+编程式导航）  -->  实现动画过度效果    -->   重复获取数据优化（在app根组件mounted中发送请求，执行一次存储vuex即可）   -->   合并params 和 query 参数    -->   mockjs 生成随机数据    -->