Vue2系列教程——脚手架其他配置项

Vue2 脚手架其他配置项 1. 格式化代码JavaScript去除分号

在脚手架根目录创建文件名为 “.prettierrc” 的文件，将如下代码赋值进去，即可，

{
    "semi": false,
    "singleQuote": true
}

2. flexible布局 安装lib-flexible，

npm i lib-flexible –-save

在main.js文件中引入lib-flexible，

import 'lib-flexible'

安装postcss-px2rem-options，

npm i postcss-px2rem-options@0.0.7 --dev

在脚手架根目录创建文件名为 “postcss.config.js” 的文件，将如下代码赋值进去，即可，

module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-px2rem-options': [
      {
        remUnit: 192,
        include: /src/gi,
      },
      {
        remUnit: 37.5,
        include: /src-mobile/gi,
      },
    ],
  },
}

3. 安装axios

全局引入的方式有以下两种：
方式一：将axios配置在vue的原型属性上使用

npm i axios --save

在main.js文件中，

import axios from 'axios'      // node_modules中的文件直接引入进来就行，不需要写名具体路径
Vue.prototype.$axios = axios   // axios配置在vue的原型属性上

在需要使用axios请求的.vue文件中，如下，

<template>
template>
<script>
methods: {
	dianji(){
		this.$axios.get('https://192.168.100.2:8888/api')
		.then((res)=>{
			console.log(res)
		})
	}
}
script>

方式二： 结合 vue-axios使用

npm i axios vue-axios --save

在main.js文件中，

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

在需要使用axios请求的.vue文件中，如下，

<template>
template>
<script>
methods: {
	dianji(){
		this.axios.get('https://192.168.100.2:8888/api')
		.then((res)=>{
			console.log(res)
		})
	}
}
script>