vue3.0 封装基本模板

论坛 期权论坛 编程之家     
选择匿名的用户   2021-5-22 21:04   58   0

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 编辑器安装插件:prettiereslint 且依赖包 npm add --save-dev prettierrc typescript prettierrc eslint-config-prettier eslint-plugin-prettier
  3. 配置 prettiereslinttypescript: prettier 手动创建 .prettierrceslint 命令行创建 .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

分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:3875789
帖子:775174
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP