创建项目
vue create hello-world
添加移动端适配
1，安装 flexible和 postcss-px2rem（命令行安装）
npm install lib-flexible --save
npm install postcss-px2rem --save
2, 引入lib-flexible
在项目入口文件main.js 中引入lib-flexible
import 'lib-flexible'
注意事项（important）: 由于flexible会动态给页面header中添加标签，所以务必请把目录 public/index.html 中的这个标签删除！！！
3, 配置postcss-px2rem
vue-cli3 构建的项目相较于vue-cli2 构建的项目精简了许多，将一些默认配置进行了更好更严密，让开发变得更高效的封装。具体请看vue-cli官网 https://cli.vuejs.org/zh/guide/
px2rem的配置放在vue-cli3 项目中vue.config.js中（找不到？可能你是一个新构建的项目，需要手动在项目根目录创建vue.config.js）
具体配置内容如下：
module.exports = {
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require('postcss-px2rem')({
remUnit: 37.5
})
]
}
}
},
扩展
一. 添加Animate.css动画库
1.安装
npm install animate.css --save
2、main.js页面引入animate
//animate动画库
import animated from 'animate.css' // npm install animate.css --save安装，再引入
Vue.use(animated)
3、页面应用
vue应用animate有几种方法，这里介绍常用的两种
1)、直接使用类名
<h1 class="animate__animated animate__flash">
Animate.css //class内不管是用哪个动画效果，animate__animated都一定要放，不然可能不会有想要的效果，后面那个便是要使用的动画类名，若要无限使用效果就加个infinite类名
</h1>
2)、css中使用
h1{ //h1为要应用的地方，也可以使用类名和id等其他选择器
animation-name:flash ; //flash为要使用的动画效果名，在这里不需要加animate前缀
animation-duration: 3s; //这里设定完成该动画的时间
/*animation:turn 1s linear infinite;*/
}
二. 添加 less 样式
- 安装 less 依赖包 ，在cmd界面输入：
npm install --save less less-loader
2.在main.js
import less from 'less'
Vue.use(less)
- 出现 TypeError: this.getOptions is not a function 是因为版本过高
npm uninstall less-loader
npm install less-loader@6.0.0
