vue新手入门指导，一篇让你学会vue技术栈，本人初学时候的文档
今天整理文档突然发现了一份md文档，打开一看 瞬间想起当年学习vue的艰难路，没人指导全靠自己蒙，下面就是md文档内容，需要的小伙伴可以打开个在线的md编译器看一看，我相信不管是新人还是老人 入门总是可以的（这只是初学时候做的笔记，如果有哪里写错了还望联系我修改，免得误导其他新人，本人qq：421217189）
# vuex ##### 五大模块： ## state 数据 ``` 在vuex中调用：state.xxx; 组件内使用：this.$store.state.xxxx mapstate函数: computed: mapState([ // 映射 this.count 为 store.state.count 'count' ]) ``` ## mutation 同步方法 ``` 在vuex中调用 store.commit('func',{arguments}) 第一个为方法名，第二个为载荷（参数），为一个对象。 在组件调用 this.$store.commit('func',{arguments}) 同上， mapMutation: methods:{ ...mapMutation([ "func", func1:"func" ]) } ``` ## action 异步方法 ``` 异步方法调用同步方法，而不是直接去更改state的值！ 例如： mutation:{ mutationfunc(){ //dosomething } } action:{ /* actionfun(store){ store.commit('mutationfunc') }*/ 简写： es6解构 actionfun({commit}){ commit("mutationfunc"); } } action 触发方式： store里面：store.dispatch('actionfun'); 组件里面：this.$store.dispatch('actionfun'); mapActions: methods:{ ...mapActions([ 'actionfun', func:"actionfun" ]) } ``` ## getters 过滤 ``` 与vue过滤属性几乎一致：调用方法： store：store.getters.doneTodos 组件里面：this.$store.getters.doneTodos mapGetters: computed:{ ...mapGetters([ 'getters', othergetters:"getters", ]) } ``` ## Module vuex分模块 ``` 例子： new Vuex.Store({ modules: { a: moduleA, b: moduleB } }) 调用：store.state.a; 可以获得moduleA的状态 组件内 this.$store.state.a; 对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象。 对于模块内部的 action，局部状态通过 context.state 暴露出来，根节点为context.rootState： 对于模块内部的 getter，根节点状态会作为第三个参数暴露出来 默认情况下： action、mutation 和 getter 是注册在全局命名空间的（也就是调用时候和全局一样调用），可以通过namespaced: true（在module模块命名空间内加），设置所有action、mutation、getter设置为命名空间的。通过调用命名空间才可以触发， 在命名空间模块内访问全局内容（Global Assets）（官网） ``` ## 模块动态注册的方法： ``` // 注册模块 `myModule` store.registerModule('myModule', { // ... }) // 注册嵌套模块 `nested/myModule` store.registerModule(['nested', 'myModule'], { // ... }) 之后就可以通过 store.state.myModule 和 store.state.nested.myModule 访问模块的状态。 ``` ## 模块卸载的方法：store.unregisterModule(moduleName) ## vuex api:https://vuex.vuejs.org/zh-cn/api.html - - - - - # vue-router : ## 动态路由匹配 ``` 使用冒号 例子： const router = new VueRouter({ router:[ { path:'/index/:id',component:index, } ] }) 可以通过beforeRouteUpdate(to,from,next)钩子来获取路由变化 ``` ## 嵌套路由： ``` 例子： const router = new VueRouter({ router:[ { path:'/father', component:index, children:[ { //地址是：/father/children path:'children', component:children, } ] } ] }) 以 / 开头的嵌套路径会被当作根路径。 ``` ## 操作浏览器地址 ``` router.push 组件内 this.$router.push 导航到指定的url（会在历史记录中添加当前url） router.replace 组件内 this.$router.replace 导航到指定的url（不会在历史记录中添加当前url） router.go 组件内 this.$router.go 后退或者前进多少步 以上方法同js中window.history ``` ## 命名视图 ``` <router-view name = "a"/> 可以在路由中设置渲染到指定视图 const router = new VueRouter({ router :[ { path:"/zhangsan", component:[ a:A-view, default:default-view, ] } ] }) ``` ## History 模式: mode: 'history' ## vue-router 守卫（生命周期函数）： ``` 全局导航：前面都需要加router 一、beforeEach ： 前置守卫；参数： to: Route: 即将要进入的目标 路由对象 from: Route: 当前导航正要离开的路由 next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。 二、beforeResolve 在所有组件内守卫和异步路由组件被解析之后 三、afterEach 全局后置钩子 组件内导航： beforeRouteEnter：在实例创建以前调用， beforeRouteUpdate：在当前路由改变，但是该组件被复用时调用 beforeRouteLeave 导航离开该组件的对应路由时调用 ``` ## 完整的导航解析流程 * 导航被触发 * 在失活的组件里调用离开守卫。 * 调用全局的 beforeEach 守卫。(beforeEach) * 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。 * 在路由配置里调用 beforeEnter。 * 解析异步路由组件。 * 在被激活的组件里调用 beforeRouteEnter。 * 调用全局的 beforeResolve 守卫 (2.5+)。 * 导航被确认。 * 调用全局的 afterEach 钩子。 * 触发 DOM 更新。 * 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。 ## 滚动行为 ``` const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { // return 期望滚动到哪个的位置 return { x: 0, y: 0 } } }) ``` ## 路由懒加载 ``` const Foo = () => import('./Foo.vue') ``` ## sass转化 ``` npm install node-sass --save-dev npm install sass-loader --save-dev { test: /\.scss$/, loaders: ["style", "css", "sass"] }, ``` ## vue+axios ``` 在vue中axios不支持use可以使用一下两种方法进行写入： 1\Vue.prototype.$http = axios 2\在 Vuex 中封装 actions: { // 封装一个 ajax 方法 saveForm (context) { axios({ method: 'post', url: '/user', data: context.state.test02 }) } } axios.get(url[, config]) axios.post(url[, data[, config]]) axios.request(config) axios.delete(url[, config]) axios.head(url[, config]) axios.put(url[, data[, config]]) axios.patch(url[, data[, config]]) //多重并发 function getUserAccount(){ return axios.get('/user/12345'); } function getUserPermissions(){ return axios.get('/user/12345/permissions'); } axios.all([getUerAccount(),getUserPermissions()]) .then(axios.spread(function(acc,pers){ //两个请求现在都完成 })); //拦截器 axios.interceptors.request.use(function(config){ //在请求发送之前做一些事 return config; },function(error){ //当出现请求错误是做一些事 return Promise.reject(error); }); //添加一个返回拦截器 axios.interceptors.response.use(function(response){ //对返回的数据进行一些处理 return response; },function(error){ //对返回的错误进行一些处理 return Promise.reject(error); }); ``` ## 预写： vue-devtools google调试vue插件 ``` 1、github下载源码（无法FQ的做法）， https://github.com/vuejs/vue-devtools 2、下载好后进入vue-devtools-master工程 执行cnpm install, 下载依赖 3、执行npm run build，编译源程序。 4、修改shells/chrome目录下的mainifest.json 中的persistent为true 5、打开谷歌浏览器的设置--->扩展程序，并勾选开发者模式 6、然后将刚刚编译后的工程中的shells目录下，chrome的整个文件夹直接拖拽到当前浏览器中，并选择启用，即可将插件安装到浏览器。 7、入口文件加上Vue.config.devtools = true 8、打开一个已有的vue项目，运行项目，然后在浏览器中--->设置--->更多工具--->开发者工具，进入调试模式，点击vue ``` ## github提交项目流程 ``` 1 、第一步： 建立本地仓库cd到你的本地项目根目录下，执行git命令 2、git init 3、git add . 4、git commit -m “注释" 5、git log（如果有则添加缓存区成功） 6、git show (检测是否添加的对) 7、git remote add origin github地址 8、git push -f origin master ``` ## github增加内容 ``` 1、git add . 2、git commit 3、git push -f origin master ```
