去哪网项目开发之移动端开发主要事项(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，这样就会变的快很多
     
     最后根据提示运行我们的项目即可。
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给提供的<router-link to="/list">跳转</router-link>
9. vue开发的项目为单页面应用，但是我们可以通过服务端渲染来改为多页面应用。
10. 单页面应用和多页面应用的区别：
    

---

移动端项目注意事项：

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代表的含义，参考链接
   安装完成之后需要导入这个包了，