六十四、vue项目去哪儿网app开发准备 -尊龙游戏旗舰厅官网
尊龙游戏旗舰厅官网
收集整理的这篇文章主要介绍了
六十四、vue项目去哪儿网app开发准备
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
| 2020/10/20 、 周二、今天又是奋斗的一天。 |
@author：runsen
@date：2020/10/20
写在前面：我是「runsen」，热爱技术、热爱开源、热爱编程。技术是开源的、知识是共享的。大四弃算法转前端，需要每天的日积月累， 每天都要加油！！！
今天将正式进入vue项目去哪儿网app开发，下面是vue项目去哪儿网app开发的准备
文章目录
- 码云建立项目
- 分析hellovue路由
- html代码禁止浏览器缩放网页大小
- 引入reset.css
- 引入border.css
- vue.js 添加 fastclick的支持
- 新建iconfont项目
关于码云建立项目，这里我pass。建立完码云项目，直接克隆在本地。
下面就是创建vue项目，
npm install vue npm install cnpm npm install -g webpack # 安装webpack npm install --global vue-cli # 全局安装脚手架工具 vue init webpack travel# 创建项目（在原有的文件夹中创建，这样可以将名字同步） cd travel npm run dev新建项目结构如下图：
结构描述如下表：
文件夹/文件描述| build | 项目构建(webpack)相关代码 |
| config | 配置目录，包括端口号等。我们初学可以使用默认的。 |
| node_modules | npm 加载的项目依赖模块 |
| src | 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件。 |
| static | 静态资源目录，如图片、字体等。 |
| test | 初始测试目录，可删除 |
| .其他文件 | 这些是一些配置文件，包括语法配置，git配置等。 |
| index.html | 这是一个模板文件，同时又是main.js的展示页面，也可以理解为index.html的viewmodel是main.js，main.js是项目启动的入口。项目启动时main.js会读取该页面，然后把当前显示的vue文件渲染进该页面。类似于mvc中的layout.cshtml文件的作用。 |
| package.json | 项目配置文件。 |
| readme.md | 项目的说明文档，markdown 格式 |
src核心
-
src是我们代码编写的核心文件，其内容如下：
-
assets: 放置一些图片，如logo等。
-
components: 目录里面放了一个组件文件，可以不用。
-
app.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用components 目录。
-
main.js: 项目的核心文件。
main.js是项目的入口
import vue from 'vue'//引入vue.js文件 import app from './app'//引入当前目录下的app.vue文件，【./】指当前目录，【.vue】被隐藏了 import router from './router'//引入当前目录下router文件夹下的index.js文件vue.config.productiontip = false//屏蔽调试时的一些console日志内容/* eslint-disable no-new */ new vue({el: '#app',router,//指定路由的js对象components: { app },//加载上方导入到组件。template: '<app/>'//选择一个组件去替换index.html 中的<div id="app">div>。这里使用我们components导入的app组件，相当于指定初始化时的显示组件，vue组件注册后可以使用<tagname>tagname>的模式来使用组件。 })el：估计是element的缩写，表示vue绑定的元素。
router：router是我们上面引入的router文件夹下的index.js文件，打开文件，代码如下：
import vue from 'vue' import router from 'vue-router' import helloworld from '@/components/helloworld'vue.use(router)export default new router({routes: [{path: '/',name: 'helloworld',component: helloworld}] })代码中开放了一个默认的router类型的对象，这个对象是vue-router中定义的，用于定义页面跳转路由，这里定义了路径helloworld对应导入/components/helloworld.vue文件。
html5默认允许用户缩放页面，如果需要禁止缩放，我们需要在index.html添加minimum-scale=1.0,maximum-scale=1.0,user-scalabel=no
<html><head><meta charset="utf-8"><title>title>head><body><div id="app">div>body> html>在html标签在浏览器里有默认的样式，例如 p 标签有上下边距，strong标签有字体加粗样式，em标签有字体倾斜样式。因此，需要重置css。
@charset "utf-8";html{touch-action: manipulation;background-color:#fff;color:#000;font-size:12px} body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0} body,input,textarea,button,select,pre,xmp,tt,code,kbd,samp{line-height:1.5;font-family:tahoma,arial,"hiragino sans gb",simsun,sans-serif} h1,h2,h3,h4,h5,h6,small,big,input,textarea,button,select{font-size:100%} h1,h2,h3,h4,h5,h6{font-family:tahoma,arial,"hiragino sans gb","微软雅黑",simsun,sans-serif} h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal} address,cite,dfn,em,i,optgroup,var{font-style:normal} table{border-collapse:collapse;border-spacing:0;text-align:left} caption,th{text-align:inherit} ul,ol,menu{list-style:none} fieldset,img{border:0} img,object,input,textarea,button,select{vertical-align:middle} article,aside,footer,header,section,nav,figure,figcaption,hgroup,details,menu{display:block} audio,canvas,video{display:inline-block;*display:inline;*zoom:1} blockquote:before,blockquote:after,q:before,q:after{content:"\0020"} textarea{overflow:auto;resize:vertical} input,textarea,button,select,a{outline:0 none;border: none;} button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0} mark{background-color:transparent} a,ins,s,u,del{text-decoration:none} sup,sub{vertical-align:baseline} html {overflow-x: hidden;height: 100%;font-size: 50px;-webkit-tap-highlight-color: transparent;} body {font-family: arial, "microsoft yahei", "helvetica neue", helvetica, sans-serif;color: #333;font-size: .28em;line-height: 1;-webkit-text-size-adjust: none;} hr {height: .02rem;margin: .1rem 0;border: medium none;border-top: .02rem solid #cacaca;} a {color: #25a4bb;text-decoration: none;}该css样式用于解决移动端1像素边框问题。问题分析：有些手机的屏幕分辨率较高，是2-3倍屏幕。css样式中border:1px solid red;在2倍屏下，显示的并不是1个物理像素，而是2个物理像素。为了解决这个问题，引入border.css是非常有必要的。
@charset "utf-8"; .border, .border-top, .border-right, .border-bottom, .border-left, .border-topbottom, .border-rightleft, .border-topleft, .border-rightbottom, .border-topright, .border-bottomleft {position: relative; } .border::before, .border-top::before, .border-right::before, .border-bottom::before, .border-left::before, .border-topbottom::before, .border-topbottom::after, .border-rightleft::before, .border-rightleft::after, .border-topleft::before, .border-topleft::after, .border-rightbottom::before, .border-rightbottom::after, .border-topright::before, .border-topright::after, .border-bottomleft::before, .border-bottomleft::after {content: "\0020";overflow: hidden;position: absolute; } /* border* 因，边框是由伪元素区域遮盖在父级* 故，子级若有交互，需要对子级设置* 定位 及 z轴*/ .border::before {box-sizing: border-box;top: 0;left: 0;height: 100%;width: 100%;border: 1px solid #eaeaea;transform-origin: 0 0; } .border-top::before, .border-bottom::before, .border-topbottom::before, .border-topbottom::after, .border-topleft::before, .border-rightbottom::after, .border-topright::before, .border-bottomleft::before {left: 0;width: 100%;height: 1px; } .border-right::before, .border-left::before, .border-rightleft::before, .border-rightleft::after, .border-topleft::after, .border-rightbottom::before, .border-topright::after, .border-bottomleft::after {top: 0;width: 1px;height: 100%; } .border-top::before, .border-topbottom::before, .border-topleft::before, .border-topright::before {border-top: 1px solid #eaeaea;transform-origin: 0 0; } .border-right::before, .border-rightbottom::before, .border-rightleft::before, .border-topright::after {border-right: 1px solid #eaeaea;transform-origin: 100% 0; } .border-bottom::before, .border-topbottom::after, .border-rightbottom::after, .border-bottomleft::before {border-bottom: 1px solid #eaeaea;transform-origin: 0 100%; } .border-left::before, .border-topleft::after, .border-rightleft::after, .border-bottomleft::after {border-left: 1px solid #eaeaea;transform-origin: 0 0; } .border-top::before, .border-topbottom::before, .border-topleft::before, .border-topright::before {top: 0; } .border-right::before, .border-rightleft::after, .border-rightbottom::before, .border-topright::after {right: 0; } .border-bottom::before, .border-topbottom::after, .border-rightbottom::after, .border-bottomleft::after {bottom: 0; } .border-left::before, .border-rightleft::before, .border-topleft::after, .border-bottomleft::before {left: 0; } @media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx) {/* 默认值，无需重置 */ } @media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {.border::before {width: 200%;height: 200%;transform: scale(.5);}.border-top::before,.border-bottom::before,.border-topbottom::before,.border-topbottom::after,.border-topleft::before,.border-rightbottom::after,.border-topright::before,.border-bottomleft::before {transform: scaley(.5);}.border-right::before,.border-left::before,.border-rightleft::before,.border-rightleft::after,.border-topleft::after,.border-rightbottom::before,.border-topright::after,.border-bottomleft::after {transform: scalex(.5);} } @media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx) {.border::before {width: 300%;height: 300%;transform: scale(.33333);}.border-top::before,.border-bottom::before,.border-topbottom::before,.border-topbottom::after,.border-topleft::before,.border-rightbottom::after,.border-topright::before,.border-bottomleft::before {transform: scaley(.33333);}.border-right::before,.border-left::before,.border-rightleft::before,.border-rightleft::after,.border-topleft::after,.border-rightbottom::before,.border-topright::after,.border-bottomleft::after {transform: scalex(.33333);} }fastclick：处理移动端click事件300毫秒延迟。
安装：npm install fastclick --sava
之后，在main.js中引入，并绑定到body。
import vue from 'vue' import app from './app' import router from './router' import fastclick from 'fastclick' import './assets/styles/reset.css' import './assets/styles/border.css'vue.config.productiontip = false fastclick.attach(document.body) /* eslint-disable no-new */ new vue({el: '#app',router,components: { app },template: '参考课程：慕课网vue2.5->2.6->3.0 开发去哪儿网app 从零基础入门到实战项目开发
| 请一键三连！ |
总结
以上是尊龙游戏旗舰厅官网为你收集整理的六十四、vue项目去哪儿网app开发准备的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇：
- 下一篇：