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

37 篇文章 1 订阅
8 篇文章 0 订阅

一、vue create yoye-front 创建项目在这里插入图片描述

二、引入 normalize.css

  1. 安装
npm install normalize.css -S
  1. ”main.ts“ 引入
import 'normalize.css'

三、引入 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 lang="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 = '~@/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. 示例试用
<h1 class="ali-light">执子之手,方知子丑,泪流满面,子不走我走</h1>

六、引入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. 使用示例
<a-button type="primary">我在试用Antd</a-button>

七、路由守卫

“@/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. 使用示例
Vue.prototype.$axios.get("/").then((res:any)=>{})
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

泡泡码客

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值