# vue3-mobile-template

**Repository Path**: ljfcode/vue3-mobile-template

## Basic Information

- **Project Name**: vue3-mobile-template
- **Description**: Vue3 移动端模板
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-06-24
- **Last Updated**: 2021-06-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue3-mobile-template

## Project setup
```
yarn install
```

### Compiles and hot-reloads for development
```
yarn serve
```

### Compiles and minifies for production
```
yarn build
```

### Lints and fixes files
```
yarn lint
```

## Project config
1. eslint 配置
```
yarn add eslint-config-standard eslint-friendly-formatter eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard
```
2. .eslintrc.js
```
module.exports = {
    root: true,
    parserOptions: {
      parser: 'babel-eslint'
    },
    env: {
      browser: true,
    },
    extends: [
      // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
      // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
      'plugin:vue/essential',
      // https://github.com/standard/standard/blob/master/docs/RULES-en.md
      'standard'
    ],
    // required to lint *.vue files
    plugins: [
      'vue'
    ],
    // add your custom rules here
    rules: {
      "semi": [2, "always"],
      // allow async-await
      'generator-star-spacing': 'off',
      // allow debugger during development
      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
    }
  }

```
3. sass node-sass
```
cnpm install node-sass@4.14.1 --dev
cnpm install sass-loader@8.0.0 --dev
```
4. 全局css变量
```
// 文件中可以写全局的变量，包括字体大小，主题色，边距大小等，这样可以方便后面整个项目风格修改
// 主题 - 蓝
$primary-color: #03A9F4;
$primary-color-dark: #409EFF;
$primary-color-light:#B3E5FC;
$primary-color-rgba-1: rgba(3,169,244,.1);
$primary-color-rgba-2: rgba(3,169,244,.2);
$background-color: #F0F2F5;
// 文字样式
$title-text-color: #303133;
$normal-text-color: #606266;
$sub-text-color: #909399;
$temp-text-color: #C0C4CC;
```
5. vue.config.js 配置
```
module.exports = {
    css: {
    loaderOptions: {
        sass: {
            // 根据自己样式文件的位置调整
            prependData: '@import "@/styles/scss/global.scss";'
        }
    }
    }
};
```