【Vue项目】一、去哪儿网APP—

前期准备内容

项目初始化安装准备
项目重点概念了解
项目初始化前期准备

项目初始化安装准备

安装node 以及 npm。
使用码云平台，创建仓库及项目，接着使用Git命令：git clone将项目克隆到本地。
全局下安装Vue-cli（脚手架），使用以下命令：
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
使用打包工具webpack，运行命令：vue init webpack 项目名称 。

项目重点概念了解

单文件组件
以.vue结尾的文件是一个单文件组件。它由三个部分组成，分别是
（1）<template>：模板
（2）<script>：逻辑
（3）<style>：CSS样式
最后，单文件组件以import的形式导入
路由：根据网址的不同，返回不同的页面给用户。
在App.vue中，<router-view/>显示的是：当前路由地址所对应的内容。即对应router文件下的index.js。
可以设置访问根路径“/”时，对应的组件内容。
单页应用 & 多页应用
（1）单页应用：

即单页应用，页面跳转时，JS动态地删除当前页面的内容，然后将新的页面DOM结构渲染出来。
在Vue中，页面的跳转使用：<router-link to="/list">列表页</router-link>
（2）多页应用：

多页应用，页面跳转时，后端返回新的HTML页面。

项目初始化前期准备

设置移动端不能通过手机放大缩小：在index.html中meta中的设置如下

<meta name="viewport" content="width=device-width,initial-scale=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

初始化样式的统一，为了保证不同浏览器显示效果一样：在assets/styles文件夹下，导入reset.css文件，并在main.js中导入。

import './assets/styles/reset.css'

解决移动端1像素在多倍屏中显示多像素的问题：在assets/styles文件夹下，引入border.css文件，并在main.js中导入。

import './assets/styles/border.css'

解决移动端点击时有300ms延迟的问题：安装fastclick
首先，在相应的文件目录下执行以下命令进行安装

npm install fastclick --save

接着，在main.js中引入fsatclick，并使用：

import fastclick from 'fastclick'

fastclick.attach(document.body)

通过iconfont官网配置项目的icon，在iconfont官网创建相应的项目。
最终配置完成代码后，通过以下git指令将代码初次推送至线上同步。

git add .   //将本地修改添加到本地git的缓存区
git commit -m 'project init'   //把文件提交到仓库，并携带‘project init’这个信息
git push   //将文件推送至仓库

【Vue项目】一、去哪儿网APP——前期准备相关推荐

Vue 实例实战之 Vue webpack 仿去哪儿网App页面开发（应用中的几个页面简单实现）
Vue 实例实战之 Vue webpack 仿去哪儿网App页面开发(应用中的几个页面简单实现) 目录 Vue 实例实战之 Vue webpack 仿去哪儿网App页面开发(应用中的几个页面简单实现) ...
vue项目实战-去哪儿网
前言为了更快地上手学习vue,我在慕课网找到Dell-Lee老师的去哪儿网视频教程,听了老师讲的课程,的确非常受益.去哪儿网项目,是我学习vue练习做的第一个项目,也是目前来说用vue做的唯一的一个 ...
六十四、Vue项目去哪儿网App开发准备
2020/10/20 . 周二.今天又是奋斗的一天. @Author:Runsen @Date:2020/10/20 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是 ...
六十五、完成Vue项目去哪儿网App首页开发（来源：慕课网）
2020/10/21. 周三.今天又是奋斗的一天. @Author:Runsen @Date:2020/10/21 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共 ...
【vue】二、vue2仿去哪儿网app——首页开发
文章目录二.vue2仿去哪儿网app--首页开发 Ⅰ 页面结构 Ⅱ 开发笔记及注意点 1.公共样式抽取 2.路径 --> 绝对路径 3.用padding-bottom实现固定宽高比 4.保证内 ...
【Android自定义View实战】之仿去哪儿网App图片按压显示指纹并缩放效果TouchFingerImageView
转载请注明出处:http://blog.csdn.net/linglongxin24/article/details/52986713 [DylanAndroid的csdn博客] 我们发现去哪儿网ap ...
【Vue项目】二、去哪儿网APP——首页开发
首页开发中的重难点重点思想:页面组件化页面组件化下的组件引入及使用 flex:1 使用iconfont图标使用vue-awesome-swiper实现轮播效果实现带有分页器的轮播实现有分页效 ...
[适合前端新手vue项目]超级可爱的宠物APP
[适合前端新手项目]超级可爱的宠物APP > < 基于网上找的UI设计图,实现简单的移动端静态页面:利用VUE框架进行管理:Mock实现模拟数据:添加了token登录和注册功能本项目用到 ...
springboot+vue项目部署到外网服务器的完整步骤（前后端分离分别部署）
前言: 我使用的是腾讯云服务器需要安装如下: jdk1.8 mysql5.5 Nginx mysql5.5在linux终端安是真的麻烦后来是用小伙伴提前在宝塔安好的mysql,记得版本是5.5 关 ...

【Vue项目】一、去哪儿网APP——前期准备

前期准备内容

项目初始化安装准备

项目重点概念了解

项目初始化前期准备

【Vue项目】一、去哪儿网APP——前期准备相关推荐

最新文章

热门文章