vue-cli4.x及vant搭建移动端项目（rem适配）

首先安装vue-cli4.x脚手架

全局安装最新的脚手架

npm install @vue/cli -g 

生成项目

vue create test_project

回车键确认执行，空格键进行选择所需要的配置

我一般习惯以下这些:

Manually select features
Babel
Router
Vuex
Css Pre-processors
Linter/Formatter
Use History         (Y)
SASS/SCSS (with node-sass) 或者 Less
EsLint + Standard config
Lint on save
In dedicated config files 存放到独立文件中
(N)

安装适配插件
postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem

amfe-flexible 用于设置 rem 基准值

使用 amfe-flexible 动态设置 rem 基准值（html 标签的字体大小）

npm i amfe-flexible

然后在 main.js 中引入此模块

import 'amfe-flexible'

使用 postcss-pxtorem 将 px 转为 rem

npm install postcss-pxtorem -D

然后在项目根目录中创建 postcss.config.js 文件

module.exports = {
    plugins: {
        "postcss-pxtorem": {
            // 设计稿 375: 37.5
            // 设计稿：750: 75
            // Vant 是基于 375
            rootValue: 37.5,
            propList: ["*"]
        }
    }
}

配置完成后就可以运行 npm run serve,一个demo就跑起来了

接下来可以在assets中建立一个公共的样式文件common.scss，并在main.js中引入

import '@/assets/common.scss'

然后在views目录下建立项目的单个页面目录，例如home文件夹
并在home文件夹里面新建index.vue跟index.scss文件
在home的index.vue文件里面可以单独引入scss文件
在script中引入：

import './home.scss'

也可以在style标签中引入：

<style lang="scss" scoped>
@import url('./home.scss');
</style>

也可以这样引入（我通常用这种）：

<style lang="scss" scoped src='./home.scss'></style>

要想打包后可以在本地运行，需要在vue.config.js文件里面加入以下配置，如果没有此文件，可在根目录下新建一个

module.exports = {
    // 基本路径
    publicPath: './',
    // 输出文件目录
    outputDir: 'dist',
    // webpack-dev-server 相关配置
    devServer: {
        port: 8899
    }
}

还有将router文件夹下的index.js文件打开，将history改为hash，不然会出现图片无法显示的情况

最后是我用的eslint配置，在eslintrc.js文件里面

module.exports = {
    root: true,
    env: {
        node: true
    },
    extends: [
        'plugin:vue/essential',
        '@vue/standard'
    ],
    parserOptions: {
        parser: 'babel-eslint'
    },
    rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'indent': 'off',
        'vue/script-indent': [
            'error',
            4,
            {
                'baseIndent': 0
            }
        ],
        'space-before-function-paren': [0, 'always'],
        // 强制在注释中 // 或 /* 使用一致的空格
        'spaced-comment': 0,
        // always-multiline：多行模式必须带逗号，单行模式不能带逗号
        'comma-dangle': [1, 'never'],
        // 末尾禁止使用分号
        'no-mixed-spaces-and-tabs': [1, 'smart-tabs'],
        "semi": 0,
        "no-tabs": 0,
    }
}

如有不对或可以改进的地方，请指出，谢谢