Vue3.0 + ts 从零开始搭框架
文章平均质量分 51
对,我
时刻保持学习之心,接触更多知识!
展开
-
Vue3.0 + Ts 项目框架搭建六:配置全屏 screenfull
前言全屏插件 screenfull🔍,用于跨浏览器使用 JavaScript Fullscreen API的简单包装器,可让您将页面或任何元素变为全屏。安装npm install screenfull本文使用的是@5.1.0版本。使用import screenfull from 'screenfull';if (screenfull.isEnabled) { screenfull.toggle(); // 开启全屏}其他API:.on(事件,函数)screenfull.on原创 2022-05-05 11:00:00 · 1159 阅读 · 4 评论 -
Vue3.0 + Ts 项目框架搭建五:配置 i18n
前言在src目录下创建 i18n文件夹,该文件下创建 index.ts,zh.ts,en.ts// index.ts 文件内容import { createI18n } from 'vue-i18n'import ZH from './zh'import EN from './en'const message = { zh: { ...ZH }, en: { ...EN }}const getCurrentLanguage = () => {原创 2022-05-05 10:00:00 · 1511 阅读 · 0 评论 -
Vue3.0 + Ts 项目框架搭建四:配置 Svg-Icon、Icon图标
1. 在src文件下,创建components/SvgIcon/index.vue组件<template> <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" :class="className" /> <svg v-else class="svg-icon" :class="className" aria-hidd原创 2022-04-17 15:11:01 · 1018 阅读 · 0 评论 -
Vue3.0 + Ts 项目框架搭建三:element-plus
一、安装首先进行依赖的安装,这里直接使用npm方式:npm install element-plus --save二、使用提供两种使用方案,根据自己需要,任选其一即可。1. 全局引入注:如果你对打包后的文件大小不是很在乎,那么使用完整导入会更方便。在main.ts中直接导入:import { createApp } from 'vue'import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'原创 2022-04-17 14:12:54 · 2010 阅读 · 0 评论 -
Vue3.0 + Ts 项目框架搭建一:创建项目
前言本文目的在于记录自己项目框架搭建的过程。一、项目创建vue create vue3_ts_demo接下来是具体选择:注:根据你需要用方向上下键选择对应功能(按 “空格键”选择/取消选择,A键全选/取消全选,I键进行反选)插件介绍:TypeScript // JavaScript的一个超集(添加了可选的静态类型和基于类的面相对象编程)Processive Web App(PWA)Support // 渐进式Web应用程序Router原创 2022-04-17 11:25:11 · 2597 阅读 · 1 评论 -
Vue3.0 + Ts 项目框架搭建二:路由 Router
前言上篇文章我们使用 vue-cli 创建了模板项目,可以看到安装的依赖只有 vue,所以要正常的驱动项目,安装必要的依赖是跑不了。其中Router是控制整个系统的页面路由,是最重要的依赖之一。因为我们使用Vue3.0的框架,所以这里必须使用Router4.0版本。一、安装通过npm安装:npm install vue-router@4 -S注:安装插件 -S 和 -D 区别-S,- -save(保存) ,包名会被注册在package.json的dependencies里面,在生产环境下这原创 2022-04-17 12:35:52 · 3317 阅读 · 0 评论