vue入门教程

Posted 2021-11-25 mengff

vue视频教程(对vue有个概览，要掌握vue-cli的用法，对vue-router，vuex有基本的概念)

https://www.imooc.com/learn/1091

1. vue-cli

vue-cli有多个版本，这里使用的是vue2.x的版本，不要使用最新版本的，容易踩坑。
https://github.com/vuejs/vue-cli/tree/v2#vue-cli--，这个是老版本的，上面有安装，模板介绍。

用vue-cli创建一个简单的项目，就可以来练习vue的基础知识了，不要自己从头开始配一个，不适合。

2. vue-router

对vue-router安装文章中的示例进行操作，熟悉其用法和常用API，参数，一定要操作一遍。

文章如下：

https://www.cnblogs.com/yuyujuan/p/9839705.html
https://segmentfault.com/a/1190000011123089
https://blog.csdn.net/haochangdi123/article/details/80338550
https://segmentfault.com/a/1190000016662929
https://www.cnblogs.com/wisewrong/p/6277262.html
https://www.cnblogs.com/fozero/p/6185492.html

文章创建项目的方式各异，以vue-cli创建的项目为准，不要被文章中乱引入js的方式误导，一般vue-cli创建的项目，只需要import，不使用script标签引入，特殊情况下再考虑。

3. vuex

https://www.cnblogs.com/wisewrong/p/6344390.html
https://www.cnblogs.com/dreamsboy/p/6820299.html
https://www.jianshu.com/p/a804606ad8e9
http://www.imooc.com/article/257378?block_id=tuijian_wz
https://www.cnblogs.com/libin-1/p/6518902.html

理解基本概念

store 集中存储state的地方，一个页面只有一个store
mutations 同步修改state的方法
getters 从state中计算出的全局变量，可以在不同模块中使用，且在入参不变时候，计算不会重新执行
actions 异步修改state的方法，通常是调用一个或多个mutations来修改state，例如，一个异步请求，开始设置loading为true，返回修改真正的state，设置loading为false，会调用2或3个mutations
modules 用来划分state的模块，一个模块通常包括若干相关度高的页面，这些页面的状态可以放在一个modules中，只是用来划分，让状态管理更清晰，方便。写法上，调用时候需要添加module名称。

掌握基本方法

$store.dispatch 调用 Action
$store.commit 调用 mutation

其他形式的dispatch和commit都是调用$store对象的，自己定义的不是。

状态映射方法

mapActions 从store中映射Actions，类似于$store.module.actions
mapMutations 从store中映射mutations，类似$store.module.mutations
mapGetters 从store中映射getters，类似于$store.getters.xxxx
mapState 从store中映射state，类似于$store.module.state.xxx

这些方法本质上都是将store中的属性映射到当前组件中，缩短调用路径，方便使用而已，都是语法糖。

vuex就是不直接修改状态，而是通过Actions和mutations来修改状态，绕了一圈而已。