创建项目

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 样式

1. 安装 less 依赖包 ，在cmd界面输入：

npm install --save less less-loader

2.在main.js

import less from 'less'
Vue.use(less)

3. 出现 TypeError: this.getOptions is not a function 是因为版本过高

npm uninstall less-loader
npm install less-loader@6.0.0