創(chuàng)建項(xiàng)目
vue create hello-world
添加移動(dòng)端適配
1，安裝 flexible和 postcss-px2rem（命令行安裝）
npm install lib-flexible --save
npm install postcss-px2rem --save
2, 引入lib-flexible
在項(xiàng)目入口文件main.js 中引入lib-flexible
import 'lib-flexible'
注意事項(xiàng)（important）: 由于flexible會(huì)動(dòng)態(tài)給頁面header中添加標(biāo)簽，所以務(wù)必請把目錄 public/index.html 中的這個(gè)標(biāo)簽刪除；鹬稀Ｏ牖ⅰ赶舆！
3, 配置postcss-px2rem
vue-cli3 構(gòu)建的項(xiàng)目相較于vue-cli2 構(gòu)建的項(xiàng)目精簡了許多龄坪，將一些默認(rèn)配置進(jìn)行了更好更嚴(yán)密叙身，讓開發(fā)變得更高效的封裝封拧。具體請看vue-cli官網(wǎng) https://cli.vuejs.org/zh/guide/
px2rem的配置放在vue-cli3 項(xiàng)目中vue.config.js中（找不到志鹃？可能你是一個(gè)新構(gòu)建的項(xiàng)目，需要手動(dòng)在項(xiàng)目根目錄創(chuàng)建vue.config.js）
具體配置內(nèi)容如下：
module.exports = {
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require('postcss-px2rem')({
remUnit: 37.5
})
]
}
}
},
擴(kuò)展
一. 添加Animate.css動(dòng)畫庫
1.安裝
npm install animate.css --save
2泽西、main.js頁面引入animate
//animate動(dòng)畫庫
import animated from 'animate.css' // npm install animate.css --save安裝曹铃，再引入
Vue.use(animated)
3、頁面應(yīng)用
vue應(yīng)用animate有幾種方法尝苇，這里介紹常用的兩種
1)铛只、直接使用類名
<h1 class="animate__animated animate__flash">
Animate.css //class內(nèi)不管是用哪個(gè)動(dòng)畫效果埠胖，animate__animated都一定要放，不然可能不會(huì)有想要的效果淳玩，后面那個(gè)便是要使用的動(dòng)畫類名直撤，若要無限使用效果就加個(gè)infinite類名
</h1>
2)、css中使用
h1{ //h1為要應(yīng)用的地方蜕着，也可以使用類名和id等其他選擇器
animation-name:flash ; //flash為要使用的動(dòng)畫效果名谋竖，在這里不需要加animate前綴
animation-duration: 3s; //這里設(shè)定完成該動(dòng)畫的時(shí)間
/*animation:turn 1s linear infinite;*/
}
二. 添加 less 樣式
- 安裝 less 依賴包 ，在cmd界面輸入：
npm install --save less less-loader
2.在main.js
import less from 'less'
Vue.use(less)
- 出現(xiàn) TypeError: this.getOptions is not a function 是因?yàn)榘姹具^高
npm uninstall less-loader
npm install less-loader@6.0.0
