Vue 项目开发初体验

# 开发前准备

工程准备，因为前端项目是之前搭建好的，所以没什么前期准备工作。但是遇到一个问题就是编译 Vue 项目会报错，清空 node-modules 目录，以及 package-lock.json 文件之后，重新进行 npm install 之后，再运行 npm run dev 启动项目就好了。

# 开发

基础的体验部分没什么好说的，基本上就是 Vue 相关内容。我觉得相比微信小程序的开发，Vue 的开发体验更好一些，主要体现在 XML、JS 和 CSS 是放在一个文件里的，而微信小程序是把这三个模块儿拆成三个文件的，所以在开发的时候会反复在三个文件里跳，挺影响开发体验。

# CSS

感觉前端发展到现在基本上还是靠 CSS 来进行样式设置和布局。

  1. align-items 的值里 flex-end 比 end 适配范围更广一些
  2. px rem 的转换详见我的这篇笔记 前端单位转换问题 | fanthus's blog (opens new window)

# Vue

  1. 开发配置，在路由列表中添加，新的路径和组件名称。

  2. 区分 Vue 实例作用域和 Vue 实例的区别。在实例作用域里想要访问数据需要添加 this 指向，比如 data, methods 都是在实例作用域，在 methods 的方法里访问 data 里面的数据的话就需要使用 this.xxx，类似下面这种情况。

    let vm = new Vue({
  data: {
    message: 'Hello'
  },
  methods: {
    getMessage() {
      return this.message  // `this` 指向 vm 实例
    }
  }
})

    但是在 Vue 的模板插值语法里，是不需要用 this 的，因为在模板中使用插值语法时,Vue 会自动将它对应到当前作用域下的属性，所以 data 中的数据以及计算属性都可以直接用，以及标签内的绑定值也可以直接用，比如下面这种

    ##html
<p>{{ message }}</p>   
<p>{{ reversedMessage  }}</p>
<div v-if="shouldShow">ShouldShow</div>
##js
data() {
	return {
      message: 'Hello!',
      shouldShow: false
	}
},
computed: {
  reversedMessage() {
    return this.message.split("").reverse().join("");
  }  
}

# 测试过程

两种主要的调试方式

  1. 在电脑上测试。开启 Chrome 浏览器，输入在测试的 Vue 组件的路径地址，比如 http://0.0.0.0:1024/demo.html#/test (opens new window) ，打开网页进行样式测试。但有的时候网页需要传入一些参数进行配置，比如有一些网页数据是需要登录后获取的，那需要在URL 后面拼接一些参数，比如 accessToken，那 url 就是 http://0.0.0.0:1024/order.html#/match-maker?accessToken=tokenx (opens new window)，页面截取到 accessToken 后，再带着 accessToken 进行对应环境的服务端 API 请求。

    项目中的环境配置使用 webpack 做的，通过配置不同的 webpack 的配置对象来定义不同的服务端代理环境，所以要改服务端的环境就直接运行不同的脚本命令，或者是改对应 webpack 配置对象中的服务端代理地址。

  2. 在手机上测试。先保证电脑和手机处在同一个局域网下。VSCode 通过 npm run dev 运行起项目后，修改手机 App 端的 H5 地址为，电脑端的局域网地址，当然要记得加上端口。

    手机 App 里也有开发和生产环境的配置，要保证前端项目的服务端代理环境和手机 App 代理环境一致，因为不同环境的 accessToken 是不能互用的。

对比两种调试方式

  1. 电脑和手机大部分情况下是一样的，电脑测试界面会更加方便，手机还需要运行 App。
  2. 当需要测试 JSBridge 的时候，只能用手机进行测试。

当调试完成之后，还需要测试，这时候可以给测试工程师用 Jenkins 打包，让测试同事直接在手机上切换环境，访问对应的 Jenkins 地址。

开发前准备
开发
CSS
Vue
测试过程