如何从0到1创建一个vue3+ts的项目

执行创建命令

pnpm create vue
# or
npm init vue@latest
# or
yarn create vue

选择项目依赖内容 (根据自己的需求选择依赖)

✔ Project name: … patients-h5-100
✔ Add TypeScript? … No / `Yes`
✔ Add JSX Support? … `No` / Yes
✔ Add Vue Router for Single Page Application development? … No / `Yes`
✔ Add Pinia for state management? … No / `Yes`
✔ Add Vitest for Unit Testing? … `No` / Yes
✔ Add Cypress for both Unit and End-to-End testing? … `No` / Yes
✔ Add ESLint for code quality? … No / `Yes`
✔ Add Prettier for code formatting? … No / `Yes`

Scaffolding project in /Users/zhousg/Desktop/patient-h5-100...

Done. Now run:

  cd patient-h5-100
  pnpm install
  pnpm lint
  pnpm dev

会得到一个项目目录, cd到文件夹目录并下包 可以输入code.直接直接通过vscode打开项目

ESLint 基本的配置

修改.eslintrc.cjs文件，补充配置项

{
    rules: {
        'prettier/prettier': [
            'warn',
            {
                singleQuote: true,
                semi: false,
                printWidth: 80,
                trailingComma: 'none',
                endOfLine: 'auto'
            }
        ],
        'vue/multi-word-component-names': [
            'warn',
            {
                ignores: ['index']
            }
        ],
        'vue/no-setup-props-destructure': ['off']
    }
}

• 格式：单引号，没有分号，行宽度 80 字符，省略最后一个逗号，换行字符串自动（系统不一样换行符号不一样）。
• Vue 组件需要大驼峰命名，除去 index 之外，App 是默认支持的。
• 允许对 props 进行解构，因为我们会开启解构保持响应式的语法糖。

可以根据自己的需求自行配置自己的规则,这里不在过多赘述，常见规则。
打开VSCode 开启 ESLint 自动修复， .vscode/settings.json

{
    // 省略其他
    "editor.codeActionsOnSave": {
        "source.fixAll": true,
    }
}

关闭掉 VSCode 保存格式化的功能。
小拓展：可以输入 pnpm lint命令手动修复格式

代码检查工作流

husky 配置
初始化与安装：https://typicode.github.io/husky/getting-started.html

pnpm dlx husky-init && pnpm install

上面的两句命令，如果不能成功，就一句一句运行

• 修改 .husky/pre-commit 文件

bash

pnpm lint

测试效果

1. 故意调整代码格式导致不符合eslint规则，例如多添加一些空行
2. git add . git commit -m “xxx” 。会发现，提交时，会自动运行pnpm lint。
   

项目目录结构调整

./src
├── assets        # 静态资源，图片...
├── components    # 通用组件
├── composable    # 组合功能通用函数 - 新增的
├── icons         # svg 图标
├── router        # 路由
│   └── index.ts
├── services      # 接口服务 API - 新增的
├── stores        # 状态仓库
├── styles        # 样式 				- 新增的
│   └── main.scss
├── types         # TS 类型			- 新增的
├── utils         # 工具函数			- 新增的
├── views         # 页面				- 新增的
├── App.vue        # 根组件
└── main.ts       # 入口文件

项目使用 Sass 预处理器，安装 Sass，即可支持 Scss 语法。

pnpm add sass -D

main.ts

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

// mark
import './styles/main.scss'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')

路由相关代码解析

import {
    createRouter,
    createWebHistory
} from 'vue-router'

// createRouter 创建路由实例
// createWebHistory() 是开启history模块
// createWebHashHistory() 是开启hash模式

// vite 的配置 import.meta.env.BASE_URL 是路由的基准地址，默认是 ’/‘
// https://vitejs.dev/guide/build.html#public-base-path
// 如果将来你部署的域名路径是：http://xxx/my-path/user
// vite.config.ts 添加配置 base: my-path，路由这就会加上 my-path 前缀了

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: []
})

export default router

准备工作

数据的持久化

安装 pinia-plugin-persistedstate

pnpm i pinia-plugin-persistedstate
# or
npm i pinia-plugin-persistedstate
# or
yarn add pinia-plugin-persistedstate

出口文件挂载

import persist from 'pinia-plugin-persistedstate'
const app = createApp(App)
// 注意使用的方式
app.use(createPinia().use(persist))

配置 stores/user.ts

import type { User } from '@/types/user'
import { defineStore } from 'pinia'
import { ref } from 'vue'

export default defineStore(
    'cp-user',
    () => {
        // 用户信息
        const user = ref<User>()
        // 设置用户，登录后使用
        const setUser = (u: User) => {
            user.value = u
        }
        // 清空用户，退出后使用
        const delUser = () => {
            user.value = undefined
        }
        return { user, setUser, delUser }
    },
    {
        persist: true
    }
)

测试 App.vue

<script setup lang="ts">
    // #1
    import useUserStore from './stores/user'
    // #2
    const store = useUserStore()
</script>

<template>
    <!-- #3 -->
    <p>{{ store.user }}</p>
    <!-- 如果这校验失败，可以修改 .eslintrc.cjs 中的 printWidth -->
    <button @click="store.setUser({ id: '1', mobile: '1', account: '1', avatar: '1', token: '1' })">
        登录
    </button>
    <button @click="store.delUser()">退出</button>
</template>

这里我们可以优化一下，把pinia代码抽离出来

抽取 Pinia 代码

import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'

import useUserStore from './user'

export const useStore = () => {
  return {
    userStore: useUserStore()
  }
}
// 创建 Pinia 实例
const pinia = createPinia()
// 使用 Pinia 插件
pinia.use(persist)
// 导出 Pinia 实例，给 main 使用
export default pinia

stores 统一导出

统一导出，代码简洁，入口唯一， store/index ,这里有好几种导出方法，如下

// 写法 1
// import { useUserStore } from './user'
// export { useUserStore }

// 写法 2
// export { useUserStore } from './user'

// 写法 3 这里我们选用写法3
export * from './user'

app.vue

import { useUserStore } from './stores'