# Travel **Repository Path**: tonysb/Travel ## Basic Information - **Project Name**: Travel - **Description**: 学习vue的第一个项目 - **Primary Language**: JavaScript - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2018-11-13 - **Last Updated**: 2023-01-21 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # travel(笔记,基于Vue2.0) ## 环境搭建 ### 必备软件1 + git git --version 查看git版本 + node npm -v 通过安装node,来集成npm功能,可在vue项目中轻松实现第三方库的管理 + vue cli2 npm install -g vue-cli 全局安装vue提供的官方脚手架 + webstorm 前端开发IDE ### Vue CLI2来构建项目 + 文档地址: https://github.com/vuejs/vue-cli/tree/v2#vue-cli-- + vue init webpack 项目名称 // 用webpack打包方式来创建vue项目(先创建一个文件夹,进入文件夹之后,执行该命令) + 提示如图 + ![](D:\frontDevelop\webstorm\workSpace\Travel\image\vuecli2.png) + 项目目录介绍如图 ![](D:\frontDevelop\webstorm\workSpace\Travel\image\vuecli2目录结构.png) #### 使用 vue cli2构建项目好处 + vue直接用webpack管理好项目,webpack参数根据自己需求自己配置即可 + 集成eslint,可帮助开发写出更加规范的js代码 + package.json自动集成,可更方便在项目中管理第三方类库 + 自动集成服务器,可快速开发,开发过程中支持热修改 r #### 项目启动详解 + 入口是index.html和main.js,这2文件是通过webpack的配置关联在一起,配置文件分别中,webpack.dev.conf.js和webpack.base.conf.js + main.js中会加载一个叫app的组件,由于router-view只能在组件中使用,所有在main.js的new Vue的时候会使用app组件,并使用template标签,渲染的时候,替换掉index.html中内容,全部走app组件中内容,由于app组件中有router-view,所有整个项目都是通过路由的方式,全部都走app这个组件,这样就形成了单页面应用 + router文件夹中的index.js就是配置整个项目的路由 + 综上,项目中一些共性文件以及第三方类库,都只需要在main.js中引入即可 #### webPack使用配置 + 配置@快捷访问路径 ~~~javascript // webpack.base.conf.js,34行左右的位置 resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'styles': resolve('src/assets/styles'), 'common': resolve('src/common') } }, ~~~ + 配置静态mock的json数据访问路径 ~~~javascript //config文件夹下的index.js,13行左右的位置 proxyTable: { '/api': { target: 'http://localhost:8080', pathRewrite: { '^/api': '/static/mock' } } }, ~~~ ### 测试 #### 前后端联调 服务器接口开发之后,需要将target中的请求地址填写服务器地址即可完成前后端联调 ~~~javascript // index.js文件,大概第13行位置,进行配置 proxyTable: { '/api': { target: 'http://localhost:8080', pathRewrite: { '^/api': '/static/mock' } } /*前后端联调环境 '/api': { target: 'http://localhost:8080' // 外网地址 } */ } ~~~ #### 配置ip地址访问 vueCli2默认生成的项目只能通过localhost进行访问,如果需要同一局域网内手机去访问,需要配置ip地址去访问项目 ~~~javascript // package.json文件中进行设置,大概第7行位置 "scripts": { "dev": "webpack-dev-server --inline --host 0.0.0.0 --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "lint": "eslint --ext .js,.vue src", "build": "node build/build.js" }, ~~~ #### 解决移动端onclick失效 BScroll默认是会阻止浏览器的原生 click 事件,所以在初始化BScroll需要开启click功能 ~~~javascript this.scroll = new BScroll(this.$refs.wrapper, { click: true }) ~~~ #### 解决低版本安卓手机空白 ~~~javascript 1) npm install babel-polyfill 2) 在main.js文件 import 'babel-polyfill' ~~~ ### 部署服务端上线 + npm run build + 最终生成的**dist文件夹**中的文件对服务器来说是有用的 + 在index.js中设置assetsPublicPath参数,可根据需求,让项目运行在服务器那个文件夹下面 ~~~javascript build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '/aaa', // 运行在服务器aaa的文件夹下面 ...} ~~~ ## Vuex 1. 文档地址: https://vuex.vuejs.org/zh/guide/ 2. 概念: 一个store(仓库),它可以接管项目中大部分state(状态),使用场景,多个组件之间公用的状态,购物车,登陆状态,默认城市. **本项目中,首页右上角城市就使用了Vuex,首页跳转城市选择页面,城市选择页点击的城市就是首页右上角城市,这种场景使用Vuex最合适** 3. 特点 + Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。 + 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。 4. 核心概念 + state **所有**状态数据集中营,整个项目中唯一存在,结构类似json 组件中获取state状态的方式: 1) 由于是响应式,**必须在组件的计算属性中获取**,这种模式导致组件依赖全局状态单例。在模块化的构建系统中，在每个需要使用 state 的组件中需要频繁地导入，并且在测试组件时需要模拟状态 2) 在根组件new Vue中引起store选项,从根传递到下面所有子组件(Vue.use(Vuex)),然后this.$store.state.count来访问 3) 使用mapState + 对象展开符来获取,同理获取getters中的计算数据,就可以使用mapGetters来获取 ~~~javascript computed: { ...mapState({ // 'city'等同于state.city currentCity: 'city' }), ...mapGetters({ doubleCity: 'doubleCity' }) } ~~~ + mutations **用来改变store中状态唯一的一个地方** 定义所有用来改变状态集中营中某个状态改变的method,这里根据需求会存放很多的method,**是同步的** 所以根据需求,如果是同步操作,直接使用mutations改变,没必要通过actions提交到mutations再进行改变 ~~~javascript // 在组件中,使用对象展开运算符来进行分发 import { mapMutations } from 'vuex' ...mapMutations(['changeCity']) ~~~ + actions 1) 不是改变状态,是提交到mutations 2) 可进行异步操作 ~~~javascript import { mapActions } from 'vuex' // 在组件中,使用对象展开运算符来进行分发 ...mapActions(['changeCity']) // actions中使用ES6对象解构,可以简化代码 // Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,context中包含commit,state,getters等, // 在函数参数中直接把context对象解构出来,然后可直接在函数体中直接用参数的方法 changeCity ({ commit, state }, city) { commit('changeCity', city) console.log(state.city) } ~~~ + getters 类似vue中计算属性,如果状态数据需要进行下一步处理之后再渲染到页面,全部放这里进行计算处理 ~~~javascript import { mapGetters } from 'vuex' // 在组件中,使用对象展开运算符来进行分发 ...mapGetters(['changeCity']) ~~~ 具体代码看项目中首页右上角城市逻辑 综上Vuex的逻辑流程: 变更流程: state中定义好共性状态值 -> 状态值有变化,在相关组件methods中进行action分发->到mutations中,再提交commit->完成状态值变更 获取流程: 相关组件computed中,根据需求使用mapState或mapGetters来获取对应的状态值 ## Vue Router 1. 文档地址: https://router.vuejs.org/zh/guide/ 2. 动态路由匹配 模式: /user/:username 匹配路径: /user/evan $route.params:{ username: 'evan' } 3. 路由之间跳转的两种方式 + 声明式跳转 参考文档: https://router.vuejs.org/zh/api/#router-link 在组件中使用 + 编程式跳转 参考文档: https://router.vuejs.org/zh/guide/essentials/navigation.html#router-push-location-oncomplete-onabort this.$router.push('/') 在js代码中使用 4. 嵌套路由 使用场景: 主组件中使用,路由匹配到组件就显示这里,然后子组件中也有,这种场景就是路由嵌套 使用children属性来实现,看demo ~~~javascript

嵌套路由

user
~~~ ## axios + 参考文档: https://segmentfault.com/a/1190000008470355 + 概念: 基于**promise**用于浏览器和node.js的http客户端 + 使用步骤 + 安装 npm install axios + 组件引入 import axios from 'axios' + 代码,具体看注解 ~~~javascript methods: { getCityInfo () { // 发送ajax请求,由于是异步回调,then中不是函数调用,是把函数指针给它 // 等异步回来的时候,再调用该函数 axios.get('/api/city.json').then(this.getCityInfoSuccess) }, getCityInfoSuccess (res) { // 这里得到ajax回调的数据,并进行业务逻辑 } }, ~~~ ## better-scroll + 参考文档: https://zhuanlan.zhihu.com/p/27407024 https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#better-scroll%20%E6%98%AF%E4%BB%80%E4%B9%88 + 处理滚动列表的第三方库 + 滴滴移动端UI库参考文档: https://didi.github.io/cube-ui/#/zh-CN ## stylus + 概念: 不需要考虑浏览器兼容性,让css有逻辑(比如定义变量,判断等等) + 语法参考文档: https://www.zhangxinxu.com/jq/stylus/ + vue中使用stylus + npm install stylus stylus-loader // 先安装这2个类库 + ~~~css ~~~ +