Vue2移動(dòng)端開(kāi)發(fā)環(huán)境搭建
本文給出基于 Vue2 的移動(dòng)端環(huán)境搭建，移動(dòng)端大家更多想到的是響應(yīng)布局，我們根據(jù)不同大小的屏幕進(jìn)行適配，當(dāng)然少不了我們的重頭戲 rem，移動(dòng)端相比 pc 端就沒(méi)什么特別的了。
我會(huì)一步一步帶領(lǐng)大家進(jìn)入 Vue2 的世界，擁抱變化，熟悉 Vue 1.x 的根據(jù)文檔可以迅速掌握 2.0，因?yàn)槠渲写蠹s 90% 的語(yǔ)法是重復(fù)的。2.0 更多是基于框架本身的優(yōu)化，整體設(shè)計(jì)思想是不變的。
vue-cli
首先還是介紹我們的腳手架工具，因?yàn)樗茏屛覀兪∪ゴ蟛糠值呐渲脮r(shí)間，這里只給出簡(jiǎn)單步驟，保證你的命令順利運(yùn)行的前提是安裝***版本的 node 和 npm，這里不贅述升級(jí)流程
全局安裝 vue-cli
- npm install vue-cli -g
借此也全局安裝一個(gè) webpack
- npm install webpack -g
注意這里可能會(huì)有坑，墻內(nèi)的用戶安裝失敗，沒(méi)關(guān)系，我們先安裝淘寶鏡像
- npm install -g cnpm --registry=https://registry.npm.taobao.org
然后通過(guò)以下命令安裝 webpack
- cnpm install webpack -g
注：下面 orange 默認(rèn)給出 npm 的安裝方案，安裝失敗請(qǐng)自行轉(zhuǎn)為 cnpm 安裝
在需要?jiǎng)?chuàng)建工程的位置運(yùn)行
- vue init webpack-simple 工程名字<工程名字不能用中文>
或者創(chuàng)建 vue1.0 的項(xiàng)目，只需將命令換成
- vue init webpack-simple#1.0
這里我們基于 2.x 開(kāi)發(fā)的，直接使用***種方法創(chuàng)建工程即可，下圖是創(chuàng)建工程時(shí)的截圖，需要你添加 Project name，Project description，Author.
圖中已經(jīng)給出下一步應(yīng)該操作的步驟，我們按照步驟一步一步執(zhí)行，這里 orange 不給大家一步一步列出。
注意：這里一定要使用 npm install 安裝官方庫(kù)，而不要使用淘寶鏡像，會(huì)導(dǎo)致部分依賴丟失。
安裝完成后，目錄如下圖。
然后我們運(yùn)行我們的項(xiàng)目后瀏覽器會(huì)自動(dòng)彈出，并展示以下頁(yè)面
這里注意觀察，默認(rèn)給我們八個(gè)鏈接，可以根據(jù)這幾個(gè)鏈接獲得我們想要的學(xué)習(xí)資源，上面是必要的的鏈接(官方文檔以及關(guān)注 vue 動(dòng)態(tài))，下面是 vue 的生態(tài)系統(tǒng)，大家親切的叫它們?yōu)槿彝啊?/p>
Vue 全家桶
我們接下來(lái)介紹全家桶的安裝(使用詳情大家可以去初始頁(yè)面的鏈接查看)
一句命令搞定全家桶
- npm install vue-router vue-resource vuex --save
package.json 已經(jīng)加入了我們的全家桶，node_modules 目錄下也有對(duì)應(yīng)的依賴包，注意這里現(xiàn)在還不能用擴(kuò)展之后的方法，因?yàn)槲覀儧](méi)引入到項(xiàng)目中來(lái)。
src/main.js 修改如下
- import Vue from 'vue'
- import VueResource from 'vue-resource'
- import VueRouter from 'vue-router'
- import Vuex from 'vuex'
- import App from './App.vue'
- Vue.use(VueResource)
- Vue.use(VueRouter)
- Vue.use(Vuex)
- new Vue({
- el: '#app',
- render: h => h(App)
- })
這時(shí)我們的項(xiàng)目就能運(yùn)行對(duì)應(yīng)的擴(kuò)展方法了
集成 Sass
作為移動(dòng)端的開(kāi)發(fā)怎么能缺少 css 預(yù)編譯語(yǔ)言。sass 安裝需要幾個(gè)依賴。
我們干脆在 package.json 把版本寫死，然后通過(guò) npm install 安裝
在 "devDependencies": {} 中添加下面幾個(gè)依賴
- "node-sass": "^3.8.0",
- "sass": "^0.5.0",
- "sass-loader": "^4.0.0",
好，我們 npm install 后，就可以正式使用 sass 啦
目錄結(jié)構(gòu)建議
依賴的安裝到這里差不多結(jié)束了，其它大家需要的可以自定義安裝
下面給出我的目錄建議供大家參考，
這里的 img 目錄放置圖片，script 目錄放置公共的工具函數(shù)，style 目錄放置我們的 sass 文件，
你查看 App.vue 文件時(shí)不難發(fā)現(xiàn)，默認(rèn)的把樣式文件給到了模塊里，這樣樣式一直跟著模塊
orange 建議大家不要這樣做，因?yàn)檫@樣十分不利于樣式的模塊化，注意區(qū)分與模版模塊化的區(qū)別，
我們單獨(dú)設(shè)置 style 目錄，并在目錄當(dāng)中對(duì) sass 進(jìn)行模塊化處理(通過(guò) import 引入 sass 模塊)
對(duì)應(yīng)的 App.vue 也變得非常簡(jiǎn)潔，代碼如下
- <style lang="sass">
- @import "/style/base.scss";
- </style>
rem 適配
對(duì)于移動(dòng)端的開(kāi)發(fā)，rem 適配必不可少，我們可以用多種方式實(shí)現(xiàn)，下面給出一種方案
在 index.html 中添加如下代碼
- <script>
- let html = document.documentElement;
- window.rem = html.getBoundingClientRect().width / 16 ;
- html.style.fontSize = window.rem + 'px';
- </script>
這里基于寬 320px 的屏幕分成了 16 份，也就是 1rem = 20px，目前大多數(shù)設(shè)計(jì)稿都是根據(jù) iphone6 的寬( 375px )走的，建議大家在這里分成 25 份，也就是 1rem = 15px，計(jì)算起來(lái)方便些。
簡(jiǎn)單說(shuō)下 rem 原理：根據(jù) html 的 fontSize 屬性值為基準(zhǔn)，其它所有的 rem 值，根據(jù)這個(gè)基準(zhǔn)計(jì)算。
我們根據(jù)屏幕寬度用 js 動(dòng)態(tài)修改了 html 的 fontSize 屬性值，達(dá)到移動(dòng)端適配的目的
總結(jié)
本文作為移動(dòng)端配置的基礎(chǔ)篇，深入了解框架后才能繼續(xù)構(gòu)建網(wǎng)站，希望這是一個(gè)好的開(kāi)始，有了這個(gè)架子再填充代碼就方便了許多，不用再去考慮開(kāi)發(fā)環(huán)境問(wèn)題了。
歡迎關(guān)注 orange 的 個(gè)人博客 http://orangexc.xyz/
