• 安裝vue-cli3

　　? npm?install -g @vue/cli

• 創建項目 vue-cli-test

　　

　　

• 腳手架-項目-成功-運行項目?

　　? ?

　　

• 基于vue-cli配置移動端自適應

• 轉自：http://hjingren.cn/2017/06/16/%E5%9F%BA%E4%BA%8Evue-cli%E9%85%8D%E7%BD%AE%E7%A7%BB%E5%8A%A8%E7%AB%AF%E8%87%AA%E9%80%82%E5%BA%94/　　

• 　配置 flexible

　　　安裝?amfe-flexible

　　　　? 在命令行中運行如下安裝：

　　　　npm install --save amfe-flexible

?　　

　　安裝完 package.json會添加這個依賴

　　

?

• 引入 lib-flexible

　　　　在項目入口文件 main.js 里 引入 lib-flexible　

import 'amfe-flexible'

?　　

?

　　運行后每個尺寸都對應font-size

• 添加 meta 標簽

　　　　在項目根目錄的 index.html 中添加如下 meta　　　　

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• px 轉 rem

　　實際開發中，我們通過設計稿得到的值單位是 px，所以要將 px 轉換成 rem 再寫進樣式中。在項目中只需要寫px，運行后會自動轉化成rem，
　　將 px 轉換成 rem 我們將使用 px2rem 這個工具，postcss-px2rem

• 安裝?postcss-px2rem

　　在命令行中運行如下安裝：　

npm install postcss-px2rem --save　

?　　安裝完 package.json變化如下：

?　　

　　若有需要就這么配置

　　

"postcss-px2rem": {"remUnit": 37.5 }

　　

?

• 報錯Can’t resolve ‘stylus-loader’，原來是因為我沒有安裝stylus和stylus-loader。?

　　

　　使用如下命令安裝stylus和stylus-loader：　　

npm install stylus stylus-loader --save-dev

　

　安裝成功后，使用npm install重新建立依賴：

npm install

?

　　打開項目代碼，找到package.json,查看文件中是否已經添加stylus和stylus-loader的版本信息。

　 　

　　npm run serve 運行項目即可

?

　　

　　安裝vue-router

npm install vue-router

?

　　在main.js中引入

import VueRouter from 'vue-router'Vue.use(VueRouter)

?

　　【返回】js　

back(){this.$router.go(-1) },

?

轉載于:https://www.cnblogs.com/dudu123/p/10197242.html

總結

以上是生活随笔為你收集整理的vue/cli 3.0 脚手架【进阶】 使用 amfe-flexible 和 postcss-px2rem进行移动端适的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。