vite+vue3+ts项目搭建
创建项目
npm create vite@latest
pnpm create vite@latest安装less/sass
pnpm i -D sass
pnpm i -D less自动导入
这两个插件使用之后不用手动导入vue里面的hooks，reactive等
pnpm i -D unplugin-vue-components unplugin-auto-importunplugin-vue-components: GitHub - antfu/unplugin-vue-components: On-demand components auto importing for Vue
unplugin-auto-import: GitHub - antfu/unplugin-auto-import: Auto import APIs on-demand for Vite, Webpack and Rollup
自动导入插件配置，在vite.config.ts中：
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
// 用于自动导入elementplus用到的组件
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";plugins: [
// 自动导入
AutoImport({
imports: ["vue", "vue-router"],
// 导入存储的文件地址
dts: "src/auto-import.d.ts",
}),
// 自动导入组件
Components({
resolvers: [ElementPlusResolver()],
// 导入存储的文件地址
dts: "src/components.d.ts",
}),
]安装vue-router
pnpm i vue-router@latest1. 在src目录下创建router目录，在router目录下新建index.ts用来作为vue-router的入口文件
2. 在router下新建route.ts用来统一存放路由
import { RouteRecordRaw } from "vue-router";
// 一级路由可以防止白屏
import HomePage from "@/views/home-page/home-page.vue";
// 模块儿路由
import userRoutes from "./module/user";
import notFound from "./module/not-found";
const routes: RouteRecordRaw[] = [
{
path: "/",
name: "home-page",
component: HomePage,
},
// 模块儿路由
...userRoutes,
// 404页面
notFound,
];
export default routes;
3. 在router下新建modules用来对路由进行模块儿化的管理
4. 在index.ts中引入vue-router
import { createRouter, createWebHashHistory } from "vue-router";
/**
* createWebHistory: 路由history模式，核心就是使用historyAPI
* createWebHashHistory：路由hash模式，核心是根据url的hash值变化来实现的
*/
import routes from "./routes";
const router = createRouter({
history: createWebHashHistory(),
routes,
});
export default router;
5. 在main.ts中注册router
import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import router from "@/router/index";
import pinia from "./store";
// import ClobalComponents from "./plugins/globalComponents";
import "@/assets/iconfont/iconfont";
// css样式重置
// import "normalize.css";
import "element-plus/theme-chalk/dark/css-vars.css";
const app = createApp(App);
app.use(router).use(pinia).mount("#app");
安装pinia
pnpm i pinia用法详询pinia官网 Pinia | The intuitive store for Vue.js
在src下新建store目录
- 新建index.ts作为入口
import { createPinia } from "pinia";
const pinia = createPinia();
export default pinia;
- 在main.ts中导入pinia
import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import router from "@/router/index";
// 导入pinia
import pinia from "./store";
const app = createApp(App);
app.use(router);
app.use(pinia);
app.mount("#app");
- 新建其他需要用到的store
import { defineStore } from "pinia";
const useUserStore = defineStore("user", {
state: () => ({
/**@type boolean */
isLogin: false,
count: 0,
}),
getters: {},
actions: {
add() {
this.count++;
},
},
});
export default useUserStore;
安装Eslint
pnpm i -D eslint-
初始化eslint配置
-
配置NPM脚本，对代码进行校验和修复，在package.json中配置
npx eslint --init{
"scripts": {
"lint:script": "eslint --ext .jsx,.vue,.tsx,.ts,.js --fix"
},
}3. eslint配置项，在根目录下的.eslintrc.cjs中添加
// eslint配置，用于校验代码
module.exports = {
// env指定环境 支持的环境: browser node commonjs es6 es2016~es2022...
// 环境很多，详情查看文档https://zh-hans.eslint.org/docs/latest/use/configure/language-options
env: {
browser: true,
es2021: true,
node: true,
},
// 配置支持的js语言选项
parserOptions: {
// 支持的js版本
ecmaVersion: "latest",
parser: "@typescript-eslint/parser", // 自定义的解析器 eslint默认使用Espree为解析器
sourceType: "module",
// 允许使用保留字作为标识符
allowReserved: false,
// 要使用哪些附加语言功能
ecmaFeatures: {
impliedStrict: true, // 启用全局严格模式
},
},
// eslint第三方插件配置
plugins: ["@typescript-eslint", "vue"],
// 使用插件配置
extends: [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:vue/vue3-essential",
],
// eslint规则配置
rules: {
// => 前后有空格
"arrow-spacing": [
2,
{
before: true,
after: true,
},
],
"block-spacing": [2, "always"],
// 对象字面量项尾是否有逗号
"comma-dangle": [2, "always-multiline"],
// 还有很多规则配置项，在官网查看 https://eslint.org/docs/latest/rules/
},
};
4. 如果对于部分文件不需要进行eslint检查，可以在根目录下的.eslintignore中进行配置
eslint官网 Documentation - ESLint - Pluggable JavaScript Linter
安装Prettier
pnpm i -D prettier在根目录的.prettierrc.cjs文件中进行配置
module.exports = {
// 一行多少代码
printWidth: 80,
// 制表符
tabWidth: 2,
// 行结尾是否添加分号
semi: true,
// 使用单引号而不是双引号
singleQuote: false,
// 什么时候将属性添加双引号 可选值: as-needed consistent preserve
quoteProps: "as-needed",
// 多行使用逗号分隔 可选值: es5 none all
trailingComma: "es5",
// 代码中字面量中括号的空格
bracketSpacing: true,
// 是否将多行 HTML（HTML、JSX、Vue、Angular）元素的>放在最后一行的末尾，而不是单独放在下一行
bracketSameLine: false,
// 箭头函数的括号
arrowParens: "always",
//