用vue-cli3脚手架搭建vue项目

vue项目初始化

拉取3.0模板

npm outdated -g //检测是否有新版本（全局）
npm update -g //更新全局的包
npm install -g @vue/cli //更新脚手架
如果不成功，就安装制定版本npm install -g @vue/cli@3.1.1

https://blog.csdn.net/qq_36407748/article/details/80739787  vue-cli3.0配置详细介绍

vue create projectName

// 安装包
npm i

安装及配置插件

1.postcss-adaptive

功能:自动将px转换成rem

使用方法文档有

安装:

npm install postcss-adaptive -D

配置:

①…postcssrc.js

/**
* remUnit:根字体大小,为设计图的1/10
* aotoRem:是否开启px自动转换为rem,如果不开启,在文档中使用px如果转rem,以及如何不转rem说明
* 使用技巧:如果开启了autoRem,把需要转换成rem的直接写px,不需要转的写PX
*/
require('postcss-adaptive')({
      remUnit: 75,
      autoRem: true
    })

2.autoprefixer

功能:自动补全浏览器前缀

安装:

npm install autoprefixer -D

配置:

①…postcssrc.js

/**
* browsers:里面配置需要补前缀的浏览器版本,根据需要扩充
*/
require('autoprefixer')(
      {
        browsers: [
          'last 20 Chrome versions',
          'IOS >= 5',
          'Android >= 4.3'
        ]
      }
    )

3.flexible

功能:移动端适配工具,淘宝开源项目

请使用新版,新版是amfe开头的,旧版是lib开头

安装:

npm i amfe-flexible -S

配置:

①.main.js

// 引入即可
import "amfe-flexible";

②.piblic/index.html

// 把原有的视窗的meta标签替换成这个
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

4.fastclick

功能:解决移动端click事件延迟问题

安装:

npm i fastclick -S

配置:

①.main.js

import FastClick from "fastclick";
FastClick.attach(document.body);

参考配置

.postcssrc.js

module.exports = {
  plugins: [
    require('autoprefixer')(
      {
        browsers: [
          'last 20 Chrome versions',
          'IOS >= 5',
          'Android >= 4.3'
        ]
      }
    ),
    require('postcss-adaptive')({
      remUnit: 75,
      autoRem: true
    })
  ]
}

vue.config.js

module.exports = {
  // 基本路径
  baseUrl: "/",
  // 输出文件目录
  outputDir: "dist",
  // eslint-loader 是否在保存的时候检查
  lintOnSave: true,
  // use the full build with in-browser compiler?
  // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
  // compiler: false,
  // webpack配置
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  chainWebpack: () => {},
  configureWebpack: () => {},
  // vue-loader 配置项
  // https://vue-loader.vuejs.org/en/options.html
  // vueLoader: {},
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: true,
  // css相关配置
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true,
    // 开启 CSS source maps?
    sourceMap: true,
    // css预设器配置项
    loaderOptions: {},
    // 启用 CSS modules for all css / pre-processor files.
    modules: false
  },
  // use thread-loader for babel & TS in production build
  // enabled by default if the machine has more than 1 cores
  parallel: require("os").cpus().length > 1,
  // 是否启用dll
  // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
  // dll: false,
  // PWA 插件相关配置
  // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  pwa: {},
  // webpack-dev-server 相关配置
  devServer: {
    open: process.platform === "darwin",
    host: "0.0.0.0",
    port: 8080,
    https: false,
    hotOnly: false,
    proxy: null, // 设置代理
    before: app => {}
  },
  // 第三方插件配置
  pluginOptions: {
    // ...
  }
};

const path = require('path')
const debug = process.env.NODE_ENV !== 'production'
const VueConf = require('./src/assets/js/libs/vue_config_class')
const vueConf = new VueConf(process.argv)
  
module.exports = {
  baseUrl: vueConf.baseUrl, // 根域上下文目录
  outputDir: 'dist', // 构建输出目录
  assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts)
  pages: vueConf.pages,
  lintOnSave: true, // 是否开启eslint保存检测，有效值：ture | false | 'error'
  runtimeCompiler: true, // 运行时版本是否需要编译
  transpileDependencies: [], // 默认babel-loader忽略mode_modules，这里可增加例外的依赖包名
  productionSourceMap: true, // 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度
  configureWebpack: config => { // webpack配置，值位对象时会合并配置，为方法时会改写配置
    if (debug) { // 开发环境配置
      config.devtool = 'cheap-module-eval-source-map'
    } else { // 生产环境配置
    }
    Object.assign(config, { // 开发生产共同配置
      resolve: {
        alias: {
          '@': path.resolve(__dirname, './src'),
          '@c': path.resolve(__dirname, './src/components'),
          'vue$': 'vue/dist/vue.esm.js'
        }
      }
    })
  },
  chainWebpack: config => { // webpack链接API，用于生成和修改webapck配置，https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
    if (debug) {
      // 本地开发配置
    } else {
      // 生产开发配置
    }
  },
  css: { // 配置高于chainWebpack中关于css loader的配置
    modules: true, // 是否开启支持‘foo.module.css’样式
    extract: true, // 是否使用css分离插件 ExtractTextPlugin，采用独立样式文件载入，不采用<style>方式内联至html文件中
    sourceMap: false, // 是否在构建样式地图，false将提高构建速度
    loaderOptions: { // css预设器配置项
      css: {
        localIdentName: '[name]-[hash]',
        camelCase: 'only'
      },
      stylus: {}
    }
  },
  parallel: require('os').cpus().length > 1, // 构建时开启多进程处理babel编译
  pluginOptions: { // 第三方插件配置
  },
  pwa: { // 单页插件相关配置 https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  },
  devServer: {
    open: true,
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false,
    proxy: {
      '/api': {
        target: '<url>',
        ws: true,
        changOrigin: true
      }
    },
    before: app => {}
  }
}