當前位置：
首頁 >
六十四、Vue项目去哪儿网App开发准备
發布時間：2024/10/8
98
豆豆
生活随笔
收集整理的這篇文章主要介紹了
六十四、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: 項目的核心文件。
分析HelloVue路由
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文件。
html代碼禁止瀏覽器縮放網頁大小
html5默認允許用戶縮放頁面，如果需要禁止縮放，我們需要在index.html添加minimum-scale=1.0,maximum-scale=1.0,user-scalabel=no
<!DOCTYPE html> <html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0" minimum-scale=1.0,maximum-scale=1.0,user-scalabel=no><title></title></head><body><div id="app"></div></body> </html>引入reset.css
在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;}引入border.css
該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);} }vue.js 添加 fastclick的支持
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: '<App/>' })新建Iconfont項目
參考課程：慕課網Vue2.5->2.6->3.0 開發去哪兒網App 從零基礎入門到實戰項目開發
| 請一鍵三連！ |
總結
以上是生活随笔為你收集整理的六十四、Vue项目去哪儿网App开发准备的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： u盘装联想电脑进不了系统怎么办 如何解决
- 下一篇： 六十六、实现Vue项目首页轮播图（vue