Vue+TypeScript+Antd+Stylus+Flexible+阿里普惠体

一、vue create yoye-front 创建项目

二、引入 normalize.css

1. 安装

npm install normalize.css -S
           

1. ”main.ts“ 引入

三、引入 flexible 适配 PC

1. 将下面文件放入”src/utils/”，该文件是”lib-flexible”修改第72行“520”->”width”得来

   flexible.js

2. ”main.ts“ 引入，注意引入顺序，要放在 “normalize.css” 后面

import 'normalize.css'
import '@/utils/flexible.js'
           

1. 安装”postcss-px2rem”

npm install postcss-px2rem -D
           

1. 在“vue.config.js”配置代码如下

module.exports = {
	lintOnSave: false,
	css: {
		loaderOptions: {
			postcss: {
				plugins: [
					require('postcss-px2rem')({
						remUnit: 192
					})
				]
			}
		},
	}
}
           

四、安装使用Stylus

npm install stylus stylus-loader --save-dev
           

五、引入阿里普惠体

1. 在“App.vue”的”style”部分使用以下代码

<style token string">"stylus">
@import 'styles/index'
</style>
           

1. 在“@/styles”文件夹下创建”index.styl”，代码如下

@import 'styles/fonts'

*
    margin: 0 !important
    padding: 0 !important
#app
    text-align: center
    height: 100vh
           

1. 在“@/styles”文件夹下创建”fonts.styl”，代码如下

$font-size-common = 16px
$font-base-path = '[email protected]/assets/fonts/'
#app
    -webkit-font-smoothing: antialiased
    -moz-osx-font-smoothing: grayscale
get-font-path(path)
    url($font-base-path + path)
font-face-config(name)
    // 阿里普惠体引入@font-face通用函数
    font-family: name
    font-display: swap
    src: get-font-path(name + '/webfont.eot')
    src: get-font-path(name + '/webfont.eot?#iefix') format('embedded-opentype'),
        get-font-path(name + '/webfont.woff2') format('woff2'),
        get-font-path(name + '/webfont.woff') format('woff'),
        get-font-path(name + '/webfont.ttf') format('truetype'),
        get-font-path(name + '/webfont.svg#webfont') format('svg')
    // @font-face 是 css3 规则
    // 指定名为"ali-light"的字体，并指定在哪里可以找到它的URL
    // https://www.runoob.com/cssref/css3-pr-font-face-rule.html
@font-face
    font-face-config: 'ali-light'
@font-face
    font-face-config: 'ali-regular'
font-common(name, fontsize = $font-size-common)
    font-family: name !important
    font-size: fontsize
    font-style: normal
.ali-light
    font-common: 'ali-light'
.ali-regular
    font-common: 'ali-regular'

           

1. 示例试用

六、引入Ant-Design

1. 安装

npm install ant-design-vue --save
npm install less less-loader --save
npm install babel-plugin-import --save-dev
           

1. “main.ts”引入

import Antd from 'ant-design-vue/es';
import 'ant-design-vue/dist/antd.less';
Vue.use(Antd);
           

1. 配置”babel.config.js”，代码如下

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [ "import", {
      "libraryName": "ant-design-vue",
      "libraryDirectory": "es",
      "style": true
    } ]
  ]
}
           

1. Antd主题色修改，“vue.config.js”的”css”新增如下代码

module.exports = {
	lintOnSave: false,
	css: {
		loaderOptions: {
			// antd主题色修改
			less: {
				lessOptions: {
					modifyVars: {
					'primary-color': '#1DA57A',
					'link-color': '#1DA57A',
					'border-radius-base': '2px',
					},
					javascriptEnabled: true,
				},
				},
		},
	}
}
           

1. Antd语言设置默认中文，“@/src/shims-vue.d.ts”，新增内容如下

declare module 'ant-design-vue/lib/locale-provider/zh_CN';
declare module 'ant-design-vue/es';
           

1. “App.vue”代码如下

<template>
  <div id="app">
    <a-config-provider :locale="locale">
      <router-view />
    </a-config-provider>
  </div>
</template>
           

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
@Component
export default class extends Vue {
  private locale = zhCN;
}
</script>
           

1. 使用示例

七、路由守卫

“@/router/index.ts”底部插入以下代码，之后有些用处的还用不着，先注释掉

router.beforeEach((to, from, next) => {
  // window.document.title = to.meta.title
  if (to.path === '/login') {
    // localStorage.removeItem('token')
    next()
  } else {
    next()
  }
})
           

八、axios封装和拦截

1. 安装”axios”

npm install axios -S
           

1. 创建文件夹“@/utils/request.ts”，代码如下

import axios, { AxiosInstance } from 'axios'

const service: AxiosInstance = axios.create({
  timeout: 6000,
})
// 添加请求拦截器
service.interceptors.request.use(
  config => {
    /* 在发起请求之前为每一个请求都添加tokan参数 */
    config.params = {
      access_token: localStorage.getItem('token')
    }
    return config
  },
  error => {
    Promise.reject(error)
  }
)
// 添加响应拦截器
service.interceptors.response.use(
  response => {
    return response
  },
  error => {
    if (error.response.status === 400) {
      console.warn(error)
    }
    // 如果登录过期或者用户认证失败
    if (error.response.status === 401) {
    }
    // 如果由服务器发生了错误
    if (error.response.status === 500) {
      console.warn(error)
    }
    return Promise.reject(error)
  }
)

export default service
           

1. ”main.ts”从”@/utils/request.ts”引入全局“axios”

import axios from './utils/request'

Vue.prototype.$axios = axios
           

1. 使用示例