配置環(huán)境

安裝nodejs (https://nodejs.org)

檢驗：

node -v

npm -v

創(chuàng)建項目

vue init webpack business(目錄名稱)

項目代碼結構

• src 源碼
• node_modules 第三方依賴
• config 項目統(tǒng)一配置
• build 項目構建

單文件組件與vue中的路由

項目入口文件：main.js

route:路由就是根據網址的不同，返回不同的內容給用戶。

:顯示當前路由地址所對應的內容

需求1：項目首頁顯示home.vue內容

1,創(chuàng)建Home.vue組件，src/pages/home/Home.vue

2,注冊Home.vue組件

src/router/index.js

需求2：當訪問http://localhost:8080/list目錄時，顯示list組件內容

需求3：組件間跳轉,首頁跳轉到商品詳細頁

使用標簽實現組件間跳轉。

查看商品詳情

項目代碼初始化

開發(fā)移動端網頁，需要配置以下內容：

1，添加viewport標簽

禁止通過手指對頁面放大或縮小，保證頁面比例始終1:1

2，引入reset.css

重置頁面的樣式表，在不同的手機瀏覽器上默認的樣式是不統(tǒng)一的，需要將不同手機的初始化樣式做統(tǒng)一。

main.js

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

3,引入border.css

1像素邊框問題，有些手機分辨率比較高，2倍屏或3倍屏。在css中寫

border 1px solid;這個1px指的是css像素，在2倍屏幕上它對應2個物理像素的高度...,為了解決這種多倍屏里1像素邊框會被顯示成多像素的問題，需要引入1像素邊框的解決方案。

main.js

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

4,300ms點擊延遲問題

在移動端開發(fā)中，在某些機型上，某些瀏覽器上，當使用click事件時，click事件會延遲300ms執(zhí)行，這樣使用click事件體驗就不好。解決方案：引入fastclick庫。

cnpm install fastclick --save

將fastclick第三方包安裝到項目依賴中

--save:開發(fā)和生產環(huán)境都需要這個依賴包

main.js

import fastClick from 'fastClick'fastClick.attach(document.body)

5.使用iconfont

www.iconfont.cn 注冊并登陸

圖標管理--->我的項目，創(chuàng)建項目

總結

以上是生活随笔為你收集整理的vue 表格内容跳转页面_Vue项目实战系列文章（一）项目预热的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。