vue學習總結二：專案前期準備工作
阿新 • • 發佈：2019-02-16
當我們構建完專案之後不要急於開始寫程式碼，一些準備工作還是必須要先完成的，比如：
- 因為我們是做的移動端單頁面的專案，會存在300ms的點選延遲問題，改怎麼解決？
- 由於各遊覽器廠商對不同html標籤的樣式具有不同的初始化定義，因此我們要做到遊覽器相容性的話就必須要統一初始化一個樣式檔案。
- 我們寫vue專案用什麼來寫樣式？css?直接寫css的話感覺太麻煩了，因此我一般習慣用stylus來寫vue專案，當然使用者可以根據自己的喜好採用不同的預編譯語言如：less,sass等
- 網頁中經常會用到各種各樣的小圖示，在沒有ui妹子給我們作圖的前提下改怎麼辦？iconfont幫我們解決了這個問題
1.要解決300m延遲問題只需要安裝並匯入一個外掛fastclick即可，
在main.js中引入並使用如下：
2.關於樣式初始化的問題，在網上隨便找找都有一大堆，我怕把個人用的貼出來供大家參考一下：這個reset.css檔案位置為：src目錄下面的asset-->style-->reset.css
*{ touch-action: none; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; background-color: #f5f3f3; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }
然後在main.js中引入即可：
找到build資料夾下面的webpack.base.config.js檔案，根據以下圖示可以自行配置其他路徑
3.在vue專案中要使用stylus語法的發必須要安裝幾個外掛：stylus和stylus-loader，
接下來我們為了驗證stylus是否成功可以在專案中測試一下，我們把初始化構建的專案中的helloworld元件中的內容給刪除掉，寫一些自己的html來測試
刪除之前：
刪除之後：
<template> <div class="hello"> <div class="test-name">測試名字</div> <h1>{{ msg }}</h1> </div> </template> <script> export default { name: 'HelloWorld', data() { return { msg: 'Welcome to Your Vue.js App' } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style lang="stylus" scoped> .hello font-size 24px color red .test-name font-size 22px color deepskyblue h1 font-size 34px font-weight bold </style>
注意stylue語法元素層次之間是要有縮排的，屬性與屬性值之間不需要寫“:”結尾也不需要寫';',是不是感覺特別簡潔有沒有，style標籤上面需要新增屬性lang=stylus來告訴瀏覽器，我是要用stylus來寫樣式，scoped表示作用域的問題
接下來看下頁面效果，看看我們寫的stylus有沒有實際效果：
4.移動端專案因為要相容各種不同裝置和解析度，所以畫素單位不能寫死否則會出現不相容的情況，個人採用的是用rem來做單位，具體寫法如下：在index.html檔案中用封裝了一個函式來把px轉換成rem
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>yourprojectname</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> <script> window.onload = function(){ /*750代表設計師給的設計稿的寬度，你的設計稿是多少，就寫多少;100代表換算比例，這裡寫10是 為了以後好算,比如，你測量的一個寬度是100px,就可以寫為1rem,以及1px=0.01rem等等*/ getRem(750,100); }; window.onresize = function(){ getRem(750,100); }; function getRem(pwidth,prem){ var html = document.getElementsByTagName("html")[0]; var oWidth = document.body.clientWidth || document.documentElement.clientWidth; html.style.fontSize = oWidth/pwidth*prem + "px"; } </script> </html>
具體用法我還是修改剛剛那個helloworld元件來展示它的用法：其中寬度，高度，行高，字型大小等都轉換為rem單位
<template> <div class="hello"> <div class="left">左邊</div> <div class="right">右邊</div> </div> </template> <script> </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style lang="stylus" scoped> .hello font-size 0.48rem width 7.5rem .left,.right width 3.75rem height 1rem line-height 1rem text-align center color white float left .left background-color deepskyblue .right background-color red </style>
接下來看效果圖：
