vue/cli 3.0 腳手架【進階】 使用 amfe-flexible 和 postcss-px2rem進行移動端適

• 安裝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)
},