去哪网项目开发之移动端开发主要事项(4)

项目预热

  1. nodejs安装。
  2. nodejs安装后也可以使用npm这个包管理工具了。
  3. 将我们的项目放在码云上
    • 在码云上创建一个项目
    • 配置好公钥
    • 在本地将项目clone下来
  4. 创建一个Vue项目
    • 通过Vue提供的Vue-cli来构建我们的项目,首先要安装Vue-cli
      sudo npm install -g @vue/cli
      
    • 创建一个Vue项目
      vue create my-project
      
    • 补充:如果你还想创建vue-cli2.x版本的脚手架,那么请参考如下命令
      sudo npm install -g vue-cli
      vue init webpack my-project
      
      在创建项目过程中会提示你是否按照淘宝镜像的cnpm,这样就会变的快很多
      去哪网项目开发之移动端开发主要事项(4)_第1张图片
      最后根据提示运行我们的项目即可。
  5. 项目结构介绍:
    1. package.json 项目所依赖的第三方包
    2. package-lock.json 项目所依赖的第三方包的具体版本,方便团队统一开发。
    3. main.js是整个项目的入口文件,在这个文件中new Vue挂载到了index.html文件中。
    4. 等等等等
  6. 以.vue结尾的文件说明是一个单文件组件。
  7. @表示src目录。
  8. Vue里的路由跳转:在Vue里我们不再用a标签来进行页面的跳转了,而是通过Vue给提供的跳转
  9. vue开发的项目为单页面应用,但是我们可以通过服务端渲染来改为多页面应用。
  10. 单页面应用和多页面应用的区别:
    去哪网项目开发之移动端开发主要事项(4)_第2张图片

去哪网项目开发之移动端开发主要事项(4)_第3张图片

移动端项目注意事项:

  1. 在挂载页面的index.html文件里加上来禁止用户在手机上通过手指来进行页面的缩放
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0,
    maximum-scale=1.0, user-scalable=no">
    
  2. 引入reset.css文件,来保障所有浏览器上的样式是一样的。
  3. 引入border.css文件,来解决1px表框问题,即:在2倍屏和3倍屏上1px显示的大小不一样,这样就给用户带来很不好的体验效果。参考链接
  4. 安装fastclick模块,因为对于移动端页面的点击事件可能会产生300毫秒的延迟,所以需要安装fastclick模块
    npm install fastclick --save
    
    补充:
    –save代表的含义,参考链接
    安装完成之后需要导入这个包了,
    去哪网项目开发之移动端开发主要事项(4)_第4张图片

你可能感兴趣的:(前端开发)