使用vue-cli3快速適配H5項目

跟我老大學到了一招使用vue-cli3快速適配H5項目的方法。
我之前也有進行一個版本的適配，直接使用cnpm install -g vue-cli，然后安裝各種插件進行適配，見我之前的博客。
后來老大指出我的版本的缺點為，H5項目，要是直接在瀏覽器中打開，我的項目就會亂樣式。
我當然要狡辯啊，H5項目當然是在手機中打開的啊~~~
好吧，屁顛屁顛的重新研究適配
我發現，我跟老大使用的vue版本不同，導致我們安裝normalize.css的時候，引用出現差別，以及解析toPx這個自定義函數的時候
使用cnpm install -g vue-cli版本的項目壓根不能解析這個函數。
接下來我們使用vue-cli3進行適配H5項目
這個的話，可以稱之為最簡單的最簡單的移動端適配方案(rem+vw)。

先卸載cnpm install -g vue-cli

cnpm uninstall vue-cli -g
cnpm install @vue/cli -g
 vue create hello-world
 yarn serve
 yarn add normalize.css
 cnpm install node-sass sass-loader

在main.js中添加

然后添加style目錄在下面添加對應的適配scss文件

@charset "utf-8";
@import '適配.scss';
blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, iframe, img, input, legend, li, ol, p, pre, td, textarea, th, ul {
	margin: 0;
	padding: 0;
}

ol, ul {
	list-style: none;
}

開始在我們項目中引用

可以看下解析后的單位