日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
Vue2移動端開發(fā)環(huán)境搭建

本文給出基于 Vue2 的移動端環(huán)境搭建，移動端大家更多想到的是響應(yīng)布局，我們根據(jù)不同大小的屏幕進行適配，當然少不了我們的重頭戲 rem，移動端相比 pc 端就沒什么特別的了。

涿州ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為成都創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：13518219792（備注：SSL證書合作）期待與您的合作！

我會一步一步帶領(lǐng)大家進入 Vue2 的世界，擁抱變化，熟悉 Vue 1.x 的根據(jù)文檔可以迅速掌握 2.0，因為其中大約 90% 的語法是重復的。2.0 更多是基于框架本身的優(yōu)化，整體設(shè)計思想是不變的。

vue-cli

首先還是介紹我們的腳手架工具，因為它能讓我們省去大部分的配置時間，這里只給出簡單步驟，保證你的命令順利運行的前提是安裝***版本的 node 和 npm，這里不贅述升級流程

全局安裝 vue-cli

 
 
    
  
  
  1. npm install vue-cli -g 
    2.

借此也全局安裝一個 webpack

 
 
    
  
  
  1. npm install webpack -g 
    2.

注意這里可能會有坑，墻內(nèi)的用戶安裝失敗，沒關(guān)系，我們先安裝淘寶鏡像

 
 
    
  
  
  1. npm install -g cnpm --registry=https://registry.npm.taobao.org 
    2.

然后通過以下命令安裝 webpack

 
 
    
  
  
  1. cnpm install webpack -g 
    2.

注：下面 orange 默認給出 npm 的安裝方案，安裝失敗請自行轉(zhuǎn)為 cnpm 安裝

在需要創(chuàng)建工程的位置運行

 
 
    
  
  
  1. vue init webpack-simple 工程名字<工程名字不能用中文> 
    2.

或者創(chuàng)建 vue1.0 的項目，只需將命令換成

 
 
    
  
  
  1. vue init webpack-simple#1.0 
    2.

這里我們基于 2.x 開發(fā)的，直接使用***種方法創(chuàng)建工程即可，下圖是創(chuàng)建工程時的截圖，需要你添加 Project name，Project description，Author.

圖中已經(jīng)給出下一步應(yīng)該操作的步驟，我們按照步驟一步一步執(zhí)行，這里 orange 不給大家一步一步列出。

注意：這里一定要使用 npm install 安裝官方庫，而不要使用淘寶鏡像，會導致部分依賴丟失。

安裝完成后，目錄如下圖。

然后我們運行我們的項目后瀏覽器會自動彈出，并展示以下頁面

這里注意觀察，默認給我們八個鏈接，可以根據(jù)這幾個鏈接獲得我們想要的學習資源，上面是必要的的鏈接(官方文檔以及關(guān)注 vue 動態(tài))，下面是 vue 的生態(tài)系統(tǒng)，大家親切的叫它們?yōu)槿彝啊?/p>

Vue 全家桶

我們接下來介紹全家桶的安裝(使用詳情大家可以去初始頁面的鏈接查看)

一句命令搞定全家桶 

 
 
    
  
  
  1. npm install vue-router vue-resource vuex --save 
    2.

package.json 已經(jīng)加入了我們的全家桶，node_modules 目錄下也有對應(yīng)的依賴包，注意這里現(xiàn)在還不能用擴展之后的方法，因為我們沒引入到項目中來。

src/main.js 修改如下

 
 
    
  
  
  1. import Vue from 'vue' 
    2. 
  
  
  2. import VueResource from 'vue-resource' 
    3. 
  
  
  3. import VueRouter from 'vue-router' 
    4. 
  
  
  4. import Vuex from 'vuex' 
    5. 
  
  
  5.  
    6. 
  
  
  6. import App from './App.vue' 
    7. 
  
  
  7.  
    8. 
  
  
  8. Vue.use(VueResource) 
    9. 
  
  
  9. Vue.use(VueRouter) 
    10. 
  
  
  10. Vue.use(Vuex) 
    11. 
  
  
  11.  
    12. 
  
  
  12. new Vue({ 
    13. 
  
  
  13.   el: '#app', 
    14. 
  
  
  14.   render: h => h(App) 
    15. 
  
  
  15. }) 
    16.

這時我們的項目就能運行對應(yīng)的擴展方法了

集成 Sass

作為移動端的開發(fā)怎么能缺少 css 預(yù)編譯語言。sass 安裝需要幾個依賴。

我們干脆在 package.json 把版本寫死，然后通過 npm install 安裝

在 "devDependencies": {} 中添加下面幾個依賴

 
 
    
  
  
  1. "node-sass": "^3.8.0", 
    2. 
  
  
  2. "sass": "^0.5.0", 
    3. 
  
  
  3. "sass-loader": "^4.0.0", 
    4.

好，我們 npm install 后，就可以正式使用 sass 啦

目錄結(jié)構(gòu)建議

依賴的安裝到這里差不多結(jié)束了，其它大家需要的可以自定義安裝

下面給出我的目錄建議供大家參考，

這里的 img 目錄放置圖片，script 目錄放置公共的工具函數(shù)，style 目錄放置我們的 sass 文件，

你查看 App.vue 文件時不難發(fā)現(xiàn)，默認的把樣式文件給到了模塊里，這樣樣式一直跟著模塊

orange 建議大家不要這樣做，因為這樣十分不利于樣式的模塊化，注意區(qū)分與模版模塊化的區(qū)別，

我們單獨設(shè)置 style 目錄，并在目錄當中對 sass 進行模塊化處理(通過 import 引入 sass 模塊)

對應(yīng)的 App.vue 也變得非常簡潔，代碼如下

 
 
    
  
  
  1.  
    2. 
  
  
  2.   @import "/style/base.scss"; 
    3. 
  
  
  3.  
    4.

rem 適配

對于移動端的開發(fā)，rem 適配必不可少，我們可以用多種方式實現(xiàn)，下面給出一種方案

在 index.html 中添加如下代碼

 
 
    
  
  
  1.  
    2.

這里基于寬 320px 的屏幕分成了 16 份，也就是 1rem = 20px，目前大多數(shù)設(shè)計稿都是根據(jù) iphone6 的寬( 375px )走的，建議大家在這里分成 25 份，也就是 1rem = 15px，計算起來方便些。

簡單說下 rem 原理：根據(jù) html 的 fontSize 屬性值為基準，其它所有的 rem 值，根據(jù)這個基準計算。

我們根據(jù)屏幕寬度用 js 動態(tài)修改了 html 的 fontSize 屬性值，達到移動端適配的目的

總結(jié)

本文作為移動端配置的基礎(chǔ)篇，深入了解框架后才能繼續(xù)構(gòu)建網(wǎng)站，希望這是一個好的開始，有了這個架子再填充代碼就方便了許多，不用再去考慮開發(fā)環(huán)境問題了。

歡迎關(guān)注 orange 的 個人博客 http://orangexc.xyz/


新聞標題：Vue2移動端開發(fā)環(huán)境搭建
轉(zhuǎn)載來源：http://www.5511xx.com/article/coepehj.html