vue3.0 封装基本模板_devin-Huang的博客-程序员ITS203_vue3.0 标准模板

技术标签: vue  前端  es6  vue.js  typescript  javascript  

vue3.0 + vite + typescript  + eslint + prettier + vscode

对vue3.0进行常规模板设计包含目录结构/ router布局/ vuex(包含modules)/ eslint与typescript配置等,开箱即用

 

  1. https://www.npmjs.com/package/vite 全局安装 vite 并创建 vue3.0 项目
  2. VScode 编辑器安装插件:prettier 与 eslint 且依赖包 npm add --save-dev prettierrc typescript prettierrc eslint-config-prettier eslint-plugin-prettier
  3. 配置 prettier、 eslint 与 typescriptprettier 手动创建 .prettierrc; eslint 命令行创建 .node_modules.bineslint --init (重点配置框架、导入模式、启用 typescript); typescript 命令行创建 .node_modules.bintsc --init(如果没该文件会使用 eslint 内置配置);
  4. editorConfig 配置编辑器中展示格式
  5. src/shims-vue.d.ts 声明支持 vue 文件并在 index.html 中直接引入 main.ts(Vite DEV 环境默认支持直接引入 TS 文件)
  6. vue-router4.0 使用与 3.0 版本几乎一致使用方式,仅仅引用方式有所改变,可参考模板
  7. vuex4.0 state 、 getter 、 mutation 、 actions 、 modules 使用与 vuex3 几乎一致使用方式与 API, 但是modules 测翻天覆地的变化, 可参考模板


详细查看源码:
Git链接:https://github.com/devin-huang/vue-next-template

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/huang084735/article/details/108848097

智能推荐

python robotframework用法及"wxpython not found"和“no browser is open”问题解决_tataaiac的博客-程序员ITS203_no browser is open

RF虐我千百遍,我待RF如初恋!为了装robotframework断断续续花了半个多月才终于可以运行起来~遇到好多问题,查不到资料,文档又少,特意来记录一下。 所需要安装的工具python 环境robotframeworkrobotframework-ride robotframework-selenium2library (为了测试Web装的一个library)

MySQL锁详解_邋遢的流浪剑客的博客-程序员ITS203_mysql锁

根据加锁的范围,MySQL里面的锁大致可以分成全局锁、表级锁和行锁三类一、全局锁全局锁就是对整个数据库实例加锁。MySQL提供了一个加全局读锁的方法,命令是Flush tables with read lock。当需要让整个库处于只读状态的时候,可以使用这个命令,之后其他线程的以下语句会被阻塞:数据更新语句(数据的增删改)、数据定义语句(包括建表、修改表结构等)和更新类事务的提交语句全局锁的......

centos8 安装 php8.0_张耘华的博客-程序员ITS203_centos8 yum安装php8

php8.0正式版已发布直接上安装代码,新特性不多解释sudo yum install epel-releasesudo yum -y install https://mirrors.aliyun.com/remi/enterprise/remi-release-7.rpmsudo yum -y install yum-utilyum repolist all |grep phpsudo yum-config-manager --enable remi-php80sudo yum

在anaconda中创建虚拟环境_Encounter∞的博客-程序员ITS203_anaconda 新建虚拟环境

anaconda中用命令提示符创建虚拟环境一、验证1.python验证Python环境变量,输入python,输出版本号,表明设置成功2.conda在命令提示符窗口中输入conda --version,如果输出版本号,表明设置成功。3.更新升级工具包为了避免错误,输入conda upgrade --all把所有的工具包进行升级。二、创建虚拟环境1、查看已经安装的python环境conda env list2、创建新的虚拟环境 conda create -n my_python_env

PhpStorm设置字体大小_Ambition?的博客-程序员ITS203_phpstorm 放大

PhpStorm 是 JetBrains 公司开发的一款商业的 PHP 集成开发工具,旨在提高用户效率,可深刻理解用户的编码,提供智能代码补全,快速导航以及即时错误检查。它的功能有很多,在这里我只介绍智能PHP编辑器的功能;功能如下:● PHP代码补全。● 智能的重复编码检测器。● PHP重构。● 支持Smarty和PHPDoc。● 支持多语言混合。一款优秀的代码编辑器可以提高程序...

随便推点

【软件使用】Cadence定制化安装——仅安装PSpice组件教程_穆文武的博客-程序员ITS203_pspice

【软件使用】Cadence定制化安装——仅安装PSpice组件教程1. Cadence和PSpicePSpice是一款仿真软件,在开关电源领域应用广泛。PSpice先是被OrCAD公司收购,在OrCAD公司收购PSpice之后,Cadence又将OrCAD公司收购,所以现在的OrCAD软件(包含PSpice)应该属于Cadence公司的产品。现在Cadence公司的EDA产品大概可以分为高端...

Revit二开-如何在WPF中获Listview、ListBox、ComboBox中选中项的值_AlanWang-HL的博客-程序员ITS203_wpf获取combox选中值

在WPF中获Listview、ListBox、ComboBox中选中项的值,亲身去研究一下在WPF中获取其中的值,其实也不难,来,下面我们一起来通过一个简单的示例来感悟一下吧。用个简单的Combobox举例 ,其他两个都是一样的获取方式;第一步:写前台XAML<Grid> <StackPanel Orientation="Horizontal"> <ComboBox Width="200" Height="40" Name="combox" D

[强网杯 2019]随便注_1ance.的博客-程序员ITS203

文章目录环境解题思路其他姿势1其他姿势2总结参考环境[强网杯 2019]随便注 BUUCTF启动靶机,获取链接http://2849c7a6-b1b9-417c-8c48-ada29998e57d.node4.buuoj.cn:81/?inject=1解题思路访问链接,看到一个输入框。输入1输出array(2) { [0]=> string(1) "1" [1]=> string(7) "hahahah"}输入2输出array(2) { [0]=&gt

jetpack : viewmodel 、livedata 、lifecycle依赖_Mars-xq的博客-程序员ITS203_lifecycle 依赖

lifecycle 依赖//androidx版本 lifecycleimplementation group: 'androidx.lifecycle', name: 'lifecycle-runtime', version: '2.0.0'implementation group: 'androidx.lifecycle', name: 'lifecycle-common', versio...

协同过滤中item-based与user-based选择依据_铭霏的博客-程序员ITS203_cf-based item

协同过滤是大家熟知的推荐算法。 总的来说协同过滤又可以分为以下两大类:Neighborhood-based:计算相似item 或user后进行推荐Model-based: 直接训练模型预测Rating在Neighborhoold-based算法中,又细分为user-based CF(Collaborative Filtering)和item-based CF。合适选择使用userd-b

推荐文章

热门文章

相关标签