一、vue create yoye-front 创建项目

二、引入 normalize.css

安装

npm install normalize.css -S

”main.ts“ 引入

import 'normalize.css'

三、引入 flexible 适配 PC

将下面文件放入”src/utils/”，该文件是”lib-flexible”修改第72行“520”->”width”得来
flexible.js
”main.ts“ 引入，注意引入顺序，要放在 “normalize.css” 后面

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

安装”postcss-px2rem”

npm install postcss-px2rem -D

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

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

四、安装使用Stylus

npm install stylus stylus-loader --save-dev

五、引入阿里普惠体

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

<style lang="stylus">
@import 'styles/index'
</style>

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

@import 'styles/fonts'*margin: 0 !importantpadding: 0 !important
#apptext-align: centerheight: 100vh

在“@/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: namefont-display: swapsrc: 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-facefont-face-config: 'ali-light'
@font-facefont-face-config: 'ali-regular'
font-common(name, fontsize = $font-size-common)font-family: name !importantfont-size: fontsizefont-style: normal
.ali-lightfont-common: 'ali-light'
.ali-regularfont-common: 'ali-regular'

示例试用

<h1 class="ali-light">执子之手，方知子丑，泪流满面，子不走我走</h1>

六、引入Ant-Design

安装

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

“main.ts”引入

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

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

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

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,},},},}
}

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

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

“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>

使用示例

<a-button type="primary">我在试用Antd</a-button>

七、路由守卫

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

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

八、axios封装和拦截

安装”axios”

npm install axios -S

创建文件夹“@/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

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

import axios from './utils/request'Vue.prototype.$axios = axios

使用示例

Vue.prototype.$axios.get("/").then((res:any)=>{})

Vue+TypeScript+Antd+Stylus+Flexible+阿里普惠体相关推荐

Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记
前言本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...
vue-loader无法解析vue里的stylus的style，外部引入styl文件可以解析，引入VueLoaderPlugin也没用
先贴webpack.config.js的配置文件 const path = require('path'); const webpack = require('webpack') const VueL ...
Stylus| vue项目中stylus和stylus-loader版本兼容问题
Stylus| vue项目中stylus和stylus-loader版本兼容问题报错代码: in ./src/App.vue?vue&type=style&index=0&i ...
LVGL学习之路——基于lv_lib_freetype库的TTF字体文件动态加载中文字体（阿里普惠字体）
前言在学习lvgl中,在英文字体上很多人都用过,但是中文字体往往需要靠取模去实现.那么我就在想,如何像windows那样加载动态的字体呢,这样想做多大字体都行.于是就开始了字体的移植. 什么是t ...
font-familly：' 阿里巴巴-普惠体 '【永久免费】 - 下载与使用
入哪里找? font-familly:' 阿里巴巴-普惠体 ' - 下载与使用 [官方称永久免费 ] 上图官网: https://www.iconfont.cn/ 阿里官方demo地址: 点击地址1 ...
qt设置阿里巴巴普惠体英文_怎样把免费的阿里巴巴普惠字体设置为Office全家桶软件主题字体？...
您好,欢迎来到[爆炒Office],这里有原创的实用办公软件技巧.着手工作实际,解决办公问题. 概述终于安装上了可以免费使用的阿里巴巴普惠字体. 虽然不是用于专业的商业设计上,但是作为日常Offic ...
重磅！阿里又推免费商用字：阿里巴巴普惠体
作为一家面向商家的巨无霸公司,阿里巴巴的用户,尤其是中小用户一向受正版字库困扰.阿里也意识到了这一点,所以早在2016年,阿里就与华康达成合作,提供45款华康字体,供商家在阿里巴巴集团旗下各平台上免费 ...
互联网日报 | 5月15日星期六 | 阿里巴巴普惠体2.0发布；淘宝直播2021财年GMV超5000亿元；福佑卡车赴美IPO...
今日看点 ✦ 阿里巴巴发布"阿里巴巴普惠体2.0",免费向全社会开放下载和使用 ✦ OPPO发布全球首款一键联手机壳套装:可操控智能家居 ✦ 福佑卡车递交赴美IPO招股书,2021 ...
如何在项目中引入字体库（如阿里巴巴普惠体）
1.先找到你需要的字体下载下来,然后解压. 比如:阿里巴巴普惠体,下载地址https://done.alibabadesign.com/puhuiti2.0 2.解压之后得到安装包,电脑需要安装的可以 ...

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

一、vue create yoye-front 创建项目

二、引入 normalize.css

三、引入 flexible 适配 PC

四、安装使用Stylus

五、引入阿里普惠体

六、引入Ant-Design

七、路由守卫

八、axios封装和拦截

Vue+TypeScript+Antd+Stylus+Flexible+阿里普惠体相关推荐

最新文章

热门文章