vue3.0 + vite + typescript 模板

vue-next-template


vue3.0 vite typescript eslint prettier vscode

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

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

详细查看源码:
Git链接:https://github.com/devin-huan...

阅读 547

推荐阅读