写在前面

项目地址

👉👉项目预览地址，可以直接设置为浏览器主页或者桌面快捷方式进行使用

源码地址

完全开源，大家可以随意研究，二次开发。当然还是十分欢迎大家点个Star⭐⭐⭐
👉👉源码链接(gitee) 👉👉源码链接(github)

1.使用Vite初始化项目

使用命令行工具在目标文件夹中执行下方命令,也可以直接在vscode的控制台中,我个人比较习惯前者,后续就直接在vscode中安装插件了

yarn create @vitejs/app

运行命令后出现下方界面,输入项目名称,然后我们选择vue-ts这个选项,回车确定之后很快就会生成一个文件夹

然后进入到生成的文件夹中命令行工具执行yarn install安装初始的依赖

运行npm run dev命令,打开本地服务器出现如下图界面,即项目初始化成功

image (1).png

2.修改配置文件

先安装一下typescript的类型声明文件

yarn add @types/node -D

初始化后的项目会生成一个vite.config.ts文件,这个文件等同于使用vue-cli创建的项目中的vue.config.js

//导入defineConfig插件以后,修改此文件就可以有代码提示了
import { defineConfig } from "vite"; 
import vue from "@vitejs/plugin-vue";
//路径处理模块
import path from "path";

export default defineConfig({
  //定义别名
  alias: {
    "@": path.resolve(__dirname, "src"),
    coms: path.resolve(__dirname, "src/components"),
  },
  //通过插件形式挂载vue
  plugins: [vue()],
});

我们通过配置alias来定义路径的别名,配置完以后我们打开App.vue 把HelloWorld组件的引用由./components/HelloWorld.vue改为coms/HelloWorld.vue

页面正常显示,我们的 路径别名 就配置成功了

但是我们在vscode中敲代码的时候并没有路径提示,这个时候我们再来修改一下tsconfig.json文件,在compilerOptions这个配置项下添加如下代码

 "compilerOptions": {
    "baseUrl":".",
    "paths": {
      "@/*":["src/*"],
      "coms/*":["src/components/*"]
    }
  },

这个时候我们在vscode里直接敲coms/就可以看到后面的路径提示了,大大的提升了开发效率

image (2).png

需要别的路径别名只需要以此类推无脑添加就可以了

3.代码规范

一大堆依赖直接一起安装完了吧,具体干什么用的就不介绍了,全是开发时依赖yarn add .... -D

"@typescript-eslint/eslint-plugin"
"@typescript-eslint/parser"
"@vue/eslint-config-prettier"
"@vue/eslint-config-typescript"
"babel-eslint"
"eslint"
"eslint-plugin-prettier"
"eslint-plugin-vue"
"prettier" 然后在根目录下新建.eslintrc.js以及.prettierrc.json两个文件

//.prettierrc.json
{
  "singleQuote": true, //使用单引号
  "seme": true,// 句尾添加分号
  "tabWidth": 2,//缩进
  "TrailingCooma": "all",//在对象或数组最后一个元素后面加逗号
  "bracketSpacing": true,//在对象，数组括号与文字之间加空格 "{ foo: bar }"
  "printWidth": 100// 超过最大值换行
  "arrowParens":"always" //箭头函数的参数总是有括号
}

这里只放了架子,具体的规则可以在rules中进行添加

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/typescript/recommended'],
  parserOptions: {
  },
  rules: {
  },
};

再配置vscode的自动化保存,在设置中搜索保存,按下图中配置即可

image (3).png

全部配置完就可以享受代码自动格式化以及代码规范带来的高效率了

4.开始敲代码

到这里为止就可以正常的进行开发了,项目中的特点及难点后面会以单独的文章进行记录

写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅认为我部分代码过于老旧,可以提供新的API或最新语法

✅对于文章中部分内容不理解

✅解答我文章中一些疑问

✅认为某些交互,功能需要优化,发现BUG

✅想要添加新功能,对于整体的设计,外观有更好的建议

最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧

链接整合

🔊项目预览地址(GitHub Pages):👉👉alanhzw.github.io

🔊项目预览备用地址(自己的服务器):👉👉warbler.duwanyu.com

🔊源码地址(gitee):👉👉gitee.com/hzw_0174/Wa…

🔊源码地址(github):👉👉github.com/alanhzw/War…

🔊项目整体介绍:👉👉juejin.cn/post/696394…

🔊流莺书签-从零搭建一个Vite+Vue3+Ts项目:👉👉juejin.cn/post/695130…

🔊流莺书签-基础组件介绍(Form,Input):👉👉juejin.cn/post/696393…

🔊流莺书签-基础组件(Button,Overlay,Dialog,Message):👉👉juejin.cn/post/696394…

🔊流莺书签-业务组件介绍:👉👉暂无

🔊我的博客:👉👉www.duwanyu.com

【流莺书签】从零开始搭建一个Vite+Vue3+TS的项目