# vue-cli3-init

**Repository Path**: crui14994/vue-cli3-init

## Basic Information

- **Project Name**: vue-cli3-init
- **Description**: https://gitee.com/crui14994
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://gitee.com/crui14994
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-10
- **Last Updated**: 2025-04-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-basic

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### vue-cli3.0新建项目，卡在node-sass后创建失败

vue create时，若在依赖中勾选了 CSS Pre-processors SCSS/SASS，，之后下载依赖时会卡在node-sass...一段时间后报错创建失败；

vue-cli3.0默认使用yarn包管理工具而不是原来的npm，而由于众所周知的原因，yarn中node-sass，如果你不翻墙，默认下载极大可能会失败

配置下 node-sass 的二进制包镜像地址就行了：

```js
npm config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
```

### vue-cli配置rem移动端适配

安装依赖：

```bash
cnpm i amfe-flexible postcss-pxtorem -S

```

在main.js中引入

```js
import 'amfe-flexible/index.js'
```

在vue.config.js中添加配置：

```js
css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('autoprefixer')({
            overrideBrowserslist: [
              "Android 4.1",
              "iOS 7.1",
              "Chrome > 31",
              "ff > 31",
              "ie >= 8"
            ]      
          }),
          require('postcss-pxtorem')({
            rootValue: 37.5,
            propList: ['*']
          })
        ]
      }
    }
},
lintOnSave: false,//关闭代码验证报错提醒
```

webpack4 使用postcss 配置 autoprefixer。当打包时，会提示警告：

```bash
  Replace Autoprefixer browsers option to Browserslist config. 
  Use browserslist key in package.json or .browserslistrc file.

  Using browsers option can cause errors. Browserslist config
  can be used for Babel, Autoprefixer, postcss-normalize and other tools.

  If you really need to use option, rename it to overrideBrowserslist.
```

原因是版本高了，引用有修改

```js
//更改前    
module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    }
  }
}
 
 
//更改后
module.exports = {
  plugins: {
    'autoprefixer': {
      overrideBrowserslist: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8"
      ]
    }
  }

```

### 解决移动端点击300ms延迟

[FastClick用法](https://majing.io/posts/10000007721218)

```安装
cnpm i fastclick -S
```

```js
//main.js中引入
import FastClick from 'fastclick'
FastClick.attach(document.body)
```