Vue-cli项目中使用stylus、scss、less、axios、代理、环境变量、svg

vue中使用stylus

npm i stylus -S
npm i stylus-loader -S

vue中使用scss

npm i node-sass -S
npm i sass-loader -S

vue中使用less

vue-cli构建的项目默认不支持less，需要手动配置

//安装项目依赖
npm i less less-loader -S
//配置webpack
module.exports = {
    //  此处省略无数行，已有的的其他的内容
    module: {
        rules: [
          //  此处省略无数行，已有的的其他的规则
          {
            test: /\.less$/,
            loader: "style-loader!css-loader!less-loader"
          }
        ]
    }
} 

Vue中使用axios

axios 是一个基于 promise 的 HTTP 库，axios并没有install 方法，所以是不能使用vue.use()方法，解决办法：
1.结合 vue-axios使用
2.axios 改写为 Vue 的原型属性
3.结合 Vuex的action

• 结合vue-axios

  //安装依赖
  npm install --save axios vue-axios
  //使用
  import Vue from 'vue'
  import axios from 'axios'
  import VueAxios from 'vue-axios'
  Vue.use(VueAxios, axios)
  //组件中使用
  this.axios.get().then().catch()
  

• .axios 改写为 Vue 的原型属性

  //使用
  import Vue from 'vue'
  import axios from 'axios'
  Vue.prototype.$ajax= axios
  //组件中使用
  this.$ajax.get().then().catch()
  

• 结合 Vuex的action

  在vuex的仓库文件store.js中引用，使用action添加方法

  import Vue from 'Vue'
  import Vuex from 'vuex'
  
  import axios from 'axios'
  
  Vue.use(Vuex)
  const store = new Vuex.Store({
  // 定义状态
  state: {
    user: {
      name: 'xiaoming'
    }
  },
  actions: {
    // 封装一个 ajax 方法
    login (context) {
      axios({
        method: 'post',
        url: '/user',
        data: context.state.user
      })
    }
  }
  })
  export default store
  

vue中配置代理

使用 Vue-cli 创建的项目，开发地址是 localhost:8080，需要访问服务端ip，需要跨域才能正确请求。跨域的方法很多，通常都需要后台配置，不过 Vue-cli 创建的项目，可以直接利用 Node.js 代理服务器，通过修改vue proxyTable接口实现跨域请求。在vue-cli项目中的config文件夹下的index.js文件中配置

proxyTable: {  
    '/api': {  //代理地址  
        target: 'http://10.209.123.234:8080/',  //需要代理的地址  
        changeOrigin: true,  //是否跨域  
        secure: false,    
        pathRewrite: {  
            '^/api': '/'   //本身的接口地址没有 '/api' 这种通用前缀，所以要rewrite，如果本身有则去掉  
        }
    }
}

vue中使用环境变量

官方文档:https://cli.vuejs.org/zh/guide/mode-and-env.html#模式

//你可以替换你的项目根目录中的下列文件来指定环境变量
.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

环境加载属性:
为一个特定模式准备的环境文件的 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级。
此外，Vue CLI 启动时已经存在的环境变量拥有最高优先级，并不会被 .env 文件覆写。

NODE_ENV
如果在环境中有默认的 NODE_ENV，你应该移除它或在运行 vue-cli-service 命令的时候明确地设置 NODE_ENV。

只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。你可以在应用的代码中这样访问它们：

console.log(process.env.VUE_APP_SECRET)

Vue中使用svg

• 安装webpack插件svg-sprite-loader

npm install svg-sprite-loader --save-dev

• 更改build/webpack.base.conf.js配置文件

{
    test: /\.svg$/,
    loader: 'svg-sprite-loader',
    include: [resolve('src/icons')],
    options: {
        symbolId: 'icon-[name]'
    }
},
{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    exclude: [resolve('src/icons')],
    options: {
        limit: 10000,
        name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
}

• src/components创建SvgIcon组件

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script>
export default {
  name: 'svg-icon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String
    }
  },
  computed: {
    iconName () {
      return `#icon-${this.iconClass}`
    },
    svgClass () {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    }
  }
}
</script>

<style scoped>
  .svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
</style>

• 在src目录下创建icons文件下，文件夹下面有svg文件夹和index.js文件。

index.js文件作用是使用webpack 的require.context自动引入 @/src/icons 下面所有的图标，svg文件夹用于存放svg图标文件

//index.js文件
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg组件
// register globally
Vue.component('svg-icon', SvgIcon)
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)

• main.js中引入组件

import './icons' // icon

• 组件引用

<svg-icon icon-class="xxx" />
//xxx为svg图标文件名