第一步 環(huán)境搭建
npm install -g @vue/cli //安裝vue腳手架
第二步 初始化
vue init webpack demo-project
配置項(xiàng)如圖
image.png
第三步 項(xiàng)目配置
1.修改訪問路徑
dev>host=>'127.0.0.1',port=>'8089' //防止與其他項(xiàng)目沖突
image.png
下面配置項(xiàng)是手機(jī)h5頁面適配配置
2.安裝sass與px2rem
//有必要可以使用cnpm代理奸笤，方法百度 cnpm
npm install node-sass --save-dev
npm install sass-loader@7.3.1 --save-dev //8.x版本不兼容
npm install style-loader --save-dev
npm install sass-resources-loader --save-dev
npm i lib-flexible --save
npm i px2rem-loader --save
在項(xiàng)目入口文件 main.js 里 引入 lib-flexible
import 'lib-flexible/flexible'
3.引入hotcss
下載hotcss https://github.com/imochen/hotcss轿秧，將下圖文件放到assets下
image.png
新建main.scss桥嗤，文件位置如上
@import "./hotcss/px2rem.scss";
$designWidth:750;
修改build/utils
// const cssLoader = {
// loader: 'css-loader',
// options: {
// sourceMap: options.sourceMap
// }
// }
const postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap
}
}
const cssLoader = {
loader: 'css-loader',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}
const px2remLoader = {
loader: 'px2rem-loader',
options: {
//一般設(shè)置75
remUnit: 75
}
}
//function generateLoaders (loader, loaderOptions) {
// const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]
scss: generateLoaders('sass').concat(//使用concat引入main.scss
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/assets/css/main.scss')
}
}
),
修改根目錄的index.html添加meta
導(dǎo)致第三方的ui會(huì)變形的問題請(qǐng)參考http://www.reibang.com/p/2614459192b0
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
4.結(jié)果
image.png
image.png
從圖上可以看出我們將$designWidth設(shè)置為750px，remUnit:75埃叭，所以頁面整體寬度為10rem,類hello的樣式寬度為375px,所以折算成5rem正好一半摸恍，到此一個(gè)手機(jī)適配的VUE項(xiàng)目搭建完畢。
