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,
    }
}

如有不對或可以改進的地方，請指出，謝謝