从零开始搭建一个Vite+Vue3+TS的项目

1.使用Vite初始化项目

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

yarn create @vitejs/app
 

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

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

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

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/就可以看到后面的路径提示了,大大的提升了开发效率

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

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的自动化保存,在设置中搜索保存,按下图中配置即可

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

4.开始敲代码

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