Vue搭建后台项目

//webpack.base.config.js
alias: {
  ‘src‘: path.resolve(__dirname, ‘../src‘),
  ‘components‘: path.resolve(__dirname, ‘../src/components‘),
  ‘api‘: path.resolve(__dirname, ‘../src/api‘),
  ‘utils‘: path.resolve(__dirname, ‘../src/utils‘),
  ‘store‘: path.resolve(__dirname, ‘../src/store‘),
  ‘router‘: path.resolve(__dirname, ‘../src/router‘)
}

//使用xxx.js
import stickTop from ‘components/stickTop‘
import getArticle from ‘api/article‘

{
  "files.autoSave":"off",
  "eslint.validate": [
      "javascript",
      "javascriptreact",
      "html",
      { "language": "vue", "autoFix": true }
    ],
    "eslint.options": {
      "plugins": ["html"]
  },
  "eslint.autoFixOnSave": true
}

//webpack.prod.conf.js
var env = process.env.NODE_ENV === ‘production‘ ? config.build.prodEnv : config.build.sitEnv
new webpack.DefinePlugin({
  ‘process.env‘: env
})

//package.json
"scripts": {
  "dev": "node build/dev-server.js",
  "build:prod": "cross-env NODE_ENV=production node build/build.js",
  "build:sit": "cross-env NODE_ENV=sit node build/build.js"
}

//request.js
import axios from ‘axios‘
import { Indicator, MessageBox } from ‘mint-ui‘

// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 60000                  // 请求超时时间
})

// request拦截器
service.interceptors.request.use(config => {
  // Do something before request is sent
  Indicator.open(‘加载中...‘)
  return config
}, error => {
  // Do something with request error
  Promise.reject(error)
})

// respone拦截器
service.interceptors.response.use(
  response => {
    Indicator.close()
    const res = response.data
    if (res.ReturnCode !== ‘000000‘) {
      if (res.ReturnMsg) {
        MessageBox.alert(res.ReturnMsg)
      } else {
        MessageBox.alert(‘系统未知错误‘)
      }
      return Promise.reject(res)
    } else {
      return res
    }
  },
  error => {
    Indicator.close()
    MessageBox.alert(‘太火爆了吧，稍安勿躁，亲，再试试‘)
    return Promise.reject(error)
  }
)
export default service

//api/xxx.js
import request from ‘@/utils/request‘

// 登录
export function userLogin(data) {
  return request({
    url: ‘login.do‘,
    method: ‘post‘,
    data
  })
}

//配置js1
var proxyMiddleware = require(‘http-proxy-middleware‘);
var express = require(‘express‘);
var app = express();
Object.keys(proxyTable).forEach(function (context) {
    var options = proxyTable[context]
    if (typeof options === ‘string‘) {
        options = {target: options}
    }
    app.use(proxyMiddleware(options.filter || context, options))
});
//配置js2
proxyTable: {
    "/tt": {
        target: "http://localhost:8090",
        changeOrigin: true
    }
}

//webpack.dev.config.js
devServer: {
  proxy: config.dev.proxyTable
},
//配置js
proxyTable: {
  "/portal": {
    target: "http://localhost:8080"
  }
}

//permission.js
const whiteList = [‘/login‘]// 不重定向白名单
router.beforeEach((to, from, next) => {
  NProgress.start() // 开启Progress
  const token = store.state.user.token
  if (token) { // 判断是否有token
    if (to.path === ‘/login‘) {
      next({ path: ‘/‘ })
    } else {
      store.dispatch(‘GenerateRoutes‘).then(() => { // 生成可访问的路由表
        router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
        next()
      })
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
      next()
    } else {
      next(‘/login‘) // 否则全部重定向到登录页！
    }
  }
})

//编译前
.example {
  color: red;
}
//编译后
.example[_v-f3f3eg9] {
  color: red;
}

.aritle-page{ //你的命名空间
    .el-tag { //element-ui 元素
      margin-right: 0px;
    }
}

// 引入 ECharts 主模块
var echarts = require(‘echarts/lib/echarts‘);
// 引入柱状图
require(‘echarts/lib/chart/bar‘);
// 引入提示框和标题组件
require(‘echarts/lib/component/tooltip‘);
require(‘echarts/lib/component/title‘);

第一步：拷贝项目下面生成的symbol代码：

引入  ./iconfont.js

第二步：加入通用css代码（引入一次就行）：

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

第三步：挑选相应图标并获取类名，应用于页面：

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

1）创建icon-svg组件

<!--components/Icon-svg-->
<template>
  <svg class="svg-icon" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

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

//引入svg组件
import IconSvg from ‘@/components/IconSvg‘
//全局注册icon-svg
Vue.component(‘icon-svg‘, IconSvg)
//在代码中使用
<icon-svg icon-class="password" />

• 首先它是一段用js来生成svg的代码，所有图标 icon 都很不直观。你完全不知道哪个图标名对应什么图标， 每次增删改图标只能整体js文件一起替换。

          

• 其次它也做不到按需加载，不能根据我们使用了那些 svg 动态的生成 svg-sprite。
• 自定义性差，通常导出的svg包含大量的无用信息，例如编辑器源信息、注释等。通常包含其它一些不会影响渲染结果或可以移除的内容。
• 添加不友善，如果我有一些自定义的svg图标，该如何和原有的 iconfont 整合到一起呢？目前只能将其也上传到 iconfont 和原有的图标放在一个项目库中，之后再重新下载，很繁琐。

b、在 vue-cli 的基础上进行改造，加入 svg-sprite-loader（可以将多个 svg 打包成 svg-sprite）

//webpack.base.config.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]‘)
  }
}

c、自动导入

我们创建一个专门放置图标 icon 的文件夹如：@/src/icons，将所有 icon 放在这个文件夹下。之后我们就要使用到 webpack 的 require.context。require.context有三个参数（directory：说明需要检索的目录；useSubdirectories：是否检索子目录；regExp: 匹配文件的正则表达式）

//src/icons/index.js
const requireAll = requireContext => requireContext.keys().map(requireContext)
const svgs = require.context(‘./svgs‘, false, /\.svg$/)
//去svgs文件夹（不包含子目录）下面的找所有文件名以 .svg 结尾的文件
requireAll(svgs)

 3）进一步优化自己的svg-移除无用信息

　　iconfont 网站导出的 svg 内容已经算蛮精简的了，但你会发现其实还是与很多无用的信息，造成了不必要的冗余。好在 svg-sprite-loader也考虑到了这点，它目前只会获取 svg 中 path 的内容，而其它的信息一概不会获取。但任何你在 path 中产生的冗余信息它就不会做处理了，如注释什么的。这时候我们就要使用另一个很好用的东西了-- svgo：因为SVG文件，尤其从各种变假期导出的SVG，通常包含大量的无用信息，例如编辑器源信息，注释，因此默认或者非最优值以及其他一些不会影响渲染结果的元素可以移除或转换。