【Vue3】フロントエンドプロジェクトの作り方教えます Vue3 + Ts + vite + pinia

---

1. プロジェクトの初期化

プロジェクトを段階的に作成する

// 使用 vite-cli 命令
npm init vite@latest

// 项目名称
? Project name:  vite-vue3-ts-pinia

// 选择框架
? Select a framework: » - Use arrow-keys. Return to submit.
     vanilla // 原生js
 >   vue     // 默认就是 vue3
     react   // react
     preact  // 轻量化react框架
     lit     // 轻量级web组件
     svelte  // svelte框架

// 使用 typescript
? Select a variant: › - Use arrow-keys. Return to submit.
     vue
 ❯   vue-ts

// 完成上面操作后，项目算是搭建完成了
cd vite-vue3-ts-pinia
npm install
npm run dev

プロジェクトをすばやく作成 – 推奨

// npm 6.x
npm init vite@latest project-name --template vue-ts
 
// npm 7+, 需要额外的双横线：
npm init vite@latest project-name -- --template vue-ts

統合構成

npm i @types/node --save-dev

tsconfig.json の変更
tsconfig.json の完全な分析

{
    
    
  "compilerOptions": {
    
    
    "typeRoots": [
      "node_modules/@types",
      "src/types"
   ],
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "baseUrl": "./",
    "paths":{
    
    
      "@": ["src"],
      "@/*": ["src/*"],
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

vite.config.ts を変更する

import {
    
     defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import * as path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
    
    
  resolve: {
    
    
    //设置别名
    alias: {
    
    
      '@': path.resolve(__dirname, 'src')
    }
  },
  plugins: [vue()],
  server: {
    
    
    port: 3000, //启动端口
    hmr: {
    
    
      host: "0.0.0.0",
      port: 3000,
    },
    // 设置 https 代理
    proxy: {
    
    
      '/api': {
    
    
        target: 'your https address',
        changeOrigin: true,
        rewrite: (path: string) => path.replace(/^\/api/, '')
      }
    }
  }
});

2.コードスタイル

エスリントをインストール

npm i eslint eslint-plugin-vue --save-dev

因为 ESLint 默认使用 Espree 进行语法解析，无法识别 TypeScript 的一些语法，所以需要安装 @typescript-eslint/parser 替代掉默认的解析器

npm install @typescript-eslint/parser --save-dev

安装对应的插件 @typescript-eslint/eslint-plugin 它作为 eslint 默认规则的补充，提供了一些额外的适用于 ts 语法的规则。

npm install @typescript-eslint/eslint-plugin --save-dev

構成ファイルを作成します: .eslintrc.js

module.exports = {
    
    
    parser: 'vue-eslint-parser',

    parserOptions: {
    
    
        parser: '@typescript-eslint/parser',
        ecmaVersion: 2020,
        sourceType: 'module',
        ecmaFeatures: {
    
    
            jsx: true
        }
    },

    extends: [
        'plugin:vue/vue3-recommended',
        'plugin:@typescript-eslint/recommended',
    ],

    rules: {
    
    
        // override/add rules settings here, such as:
    }
};

無視ファイルを作成します: .eslintignore

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules/
dist/
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

コマンドライン操作: package.json の変更

{
    
    
    ...
    "scripts": {
    
    
        ...
        "eslint:comment": "使用 ESLint 检查并自动修复 src 目录下所有扩展名为 .js 和 .vue 的文件",
        "eslint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
    }
    ...
}

インストール

インストール：

npm i prettier eslint-config-prettier eslint-plugin-prettier --save-dev

構成ファイルを作成します: prettier.config.js または .prettierrc.js

module.exports = {
    
    
    // 一行最多 80 字符
    printWidth: 80,
    // 使用 4 个空格缩进
    tabWidth: 4,
    // 不使用 tab 缩进，而使用空格
    useTabs: false,
    // 行尾需要有分号
    semi: true,
    // 使用单引号代替双引号
    singleQuote: true,
    // 对象的 key 仅在必要时用引号
    quoteProps: 'as-needed',
    // jsx 不使用单引号，而使用双引号
    jsxSingleQuote: false,
    // 末尾使用逗号
    trailingComma: 'all',
    // 大括号内的首尾需要空格 { foo: bar }
    bracketSpacing: true,
    // jsx 标签的反尖括号需要换行
    jsxBracketSameLine: false,
    // 箭头函数，只有一个参数的时候，也需要括号
    arrowParens: 'always',
    // 每个文件格式化的范围是文件的全部内容
    rangeStart: 0,
    rangeEnd: Infinity,
    // 不需要写文件开头的 @prettier
    requirePragma: false,
    // 不需要自动在文件开头插入 @prettier
    insertPragma: false,
    // 使用默认的折行标准
    proseWrap: 'preserve',
    // 根据显示样式决定 html 要不要折行
    htmlWhitespaceSensitivity: 'css',
    // 换行符使用 lf
    endOfLine: 'auto'
}

.eslintrc.js 構成を変更する

module.exports = {
    
    
    ...

    extends: [
        'plugin:vue/vue3-recommended',
        'plugin:@typescript-eslint/recommended',
        'prettier',
        'plugin:prettier/recommended'
    ],

    ...
};

**コマンドライン操作: **package.json の変更

{
    
    
    ...
    "scripts": {
    
    
        ...
        "prettier:comment": "自动格式化当前目录下的所有文件",
        "prettier": "prettier --write"
    }
    ...
}

3. 状態管理ツール – Pinia

Pinia 中国語ドキュメント

アドバンテージ

1. Vue2 と Vue3 の両方をサポート
2. 従来のミューテーションを放棄し、ステート、ゲッター、アクションのみを使用して、ステート管理ライブラリを簡素化します
3. 入れ子になったモジュールは不要で、ストアは自由に使用でき、コードの分割が改善されます。
4. 十分に軽量で、圧縮されたボリュームはわずか 1.6kb です。

を使用してピニアを基本にする

---

インストール

npm i pinia --save

使用

新しい src/store ファイルを作成し、index.ts を作成してストアをエクスポートします。

import {
    
    createPinia} from "pinia";
const store=createPinia()
export default store

src/store の下に user.ts を作成します

import {
    
    createPinia} from "pinia";
export const useUserStore = defineStore({
    
    
    id: 'user',
    state: () => {
    
    
        return {
    
    
            name: 'Pinia'
        }
    },
    actions: {
    
    
        updateName(name) {
    
    
            this.name = name
        }
    }
})

main.ts リファレンス

import {
    
     createApp } from 'vue'
import './style.css'
import store from "@/store";
import App from './App.vue'
// 创建vue实例
const app = createApp(App)
// 挂载pinia
app.use(store)
// 挂载实例
app.mount('#app');

コンポーネントの State を取得および変更する

<!--  在需要的页面使用该组件：pinia-demo.vue,-->
<template>
  <div>{
   
   { userStore.name }}</div>
  <button @click="handleChange">修改Pinia</button>
</template>

<script lang="ts" setup>
  import {
      
       useUserStore } from '@/store/user'

  const userStore = useUserStore()
  //修改Pinia的state
  const handleChange = () => {
      
      
    userStore.name=`"修改后的Pinia==>"${ 
        Date.now()};`
  };

  // return {
      
      
  //   handleChange
  // }
</script>

<style scoped></style>

4. Vue-Router4 クイックスタートガイド

インストール

npm i vue-router --save

すぐに始めましょう

新しい src/router/index.ts を作成し、ルーターをエクスポートします

履歴モードはハッシュ モードのアップグレード バージョンであり、違いはブラウザ リンクの表示にあります。

• hash 模式：実際の URL の後に # 記号を付けてフロントエンドのルーティング パスをつなぎ合わせるパターンです。# 背後のパスが変更された場合、ブラウザはリクエストを再開しませんが、hashchange イベントをトリガーします。ハッシュ
  モード リンク スタイル: http://localhost:8080/#/home
• history 模式：history API は、開発者がフロントエンド ルーティングを直接変更できる HTML5 の新機能です。履歴
  モードのリンク スタイル: http://localhost:8080/home

import {
    
     createWebHistory, createRouter,RouteRecordRaw } from "vue-router";
const routes: Array<RouteRecordRaw> = [
    {
    
    
        path: '/login',
        name: 'Login',
        meta: {
    
    
            title: '登录',
            keepAlive: true,
            requireAuth: false
        },
        component: () => import('@/pages/login.vue')
    },
    {
    
    
        path: '/',
        name: 'Index',
        meta: {
    
    
            title: '首页',
            keepAlive: true,
            requireAuth: true
        },
        component: () => import('@/pages/index.vue')
    },
   
]

const router = createRouter({
    
    
    history: createWebHistory(),
    routes
});
export default router;

5. VueUse クイックスタートガイド

VueUseとは

---

VueUse は、Composition API に基づくユーティリティ関数のコレクションです。簡単に言えば、これはツール関数パッケージであり、いくつかの一般的な関数をすばやく実装するのに役立つため、反復作業を解決するために自分でそれらを記述する必要はありません。また、Composition API に基づくカプセル化。vue3 でもっと便利にしましょう。

使いやすい

---

VueUse をインストールする

npm i @vueuse/core

VueUse を使用する

<template>
  <h1> 测试 vueUse 的鼠标坐标 </h1>
  <h3>Mouse: {
    
    {
    
    x}} x {
    
    {
    
    y}}</h3>
  <hr>
  <div v-if="isSupported">
    <note>
      Clipboard Permission: read <b>{
    
    {
    
     permissionRead }}</b> | write
      <b>{
    
    {
    
     permissionWrite }}</b>
    </note>
    <p>
      Current copied: <code>{
    
    {
    
     text || 'none' }}</code>
    </p>
    <input v-model="input" type="text">
    <button @click="copy(input)">
      Copy
    </button>
  </div>
  <p v-else>
    Your browser does not support Clipboard API
  </p>
  </template>

<script lang="ts" setup>
import {
    
     useMouse,useLocalStorage,usePreferredDark,useToggle  } from '@vueuse/core'
// 监听当前鼠标坐标的一个方法，他会实时的获取鼠标的当前的位置
const {
    
     x, y } = useMouse()
//持久化数据的方法，他会把数据持久化到本地存储中
const store = useLocalStorage(
    'my-storage',
    {
    
    
      name: 'Apple',
      color: 'red',
    },
)
// 使用剪贴板
import {
    
     ref } from 'vue'
import {
    
     useClipboard, usePermission } from '@vueuse/core'
const input = ref('')
const {
    
     text, isSupported, copy } = useClipboard()
const permissionRead = usePermission('clipboard-read')
const permissionWrite = usePermission('clipboard-write')



</script>

非常に多くの関数ライブラリがあり、詳細については公式

6. グローバル スタイル CSS

ネイティブ CSS の新機能

---

新しいスタイル ファイル src/styles/index.css を作成します。

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,/* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
fieldset, lengend, button, input, textarea, /* form elements 表单元素 */
th, td {
    
    
    /* table elements 表格元素 */
    margin: 0;
    padding: 0;
}
/* 设置默认字体 */
body,
button,
input,
select,
textarea {
    
    
    /* for ie */
    /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
    /* 用 ascii 字符表示，使得在任何编码下都无问题 */
    /*font: 12px/1 Tahoma, Helvetica, Arial, '\5b8b\4f53', sans-serif;*/
    font: 12px/1  'Microsoft YaHei';
    touch-action: manipulation;
}

scss以下

インストール

npm add -D scss
npm add -D less

<style lang="scss">
   .scssstyle{
      
      }
 </style>


<style lang="less">
   .lessstyle {
      
      }
 </style>

パッケージ axios

Axios は promise ベースの HTTP ライブラリです. 簡単に言えば, get および post リクエストを送信して
axios をカプセル化し, 主にインターセプターを介して HTTP リクエストとレスポンスを処理し, HTTP リクエスト結果をフィードバックします.

依存関係をインストールする

---

axios の依存関係をインストールし、element-plus をインストールしてリクエスト結果をフィードバックする

npm i axios
npm i element-plus

カプセル化

---

index.ts ファイル

• リクエストで返されるデータ形式を定義し、サーバーとデータ形式について合意する
• axiosインスタンス作成時に渡すaxiosの構成情報を定義する
• リクエスト インターセプター。すべてのフロントエンド インターフェース リクエストは最初にリクエスト インターセプターに到達します。ここにリクエスト ヘッダー情報を追加できます。
• 応答インターセプター、サーバーから返されたデータは最初に応答インターセプターに到達し、サーバーの応答情報を処理できます。エラーの場合は一般的なエラーを処理し、成功した場合はデータを返します
• 一般的に使用される get、put、post、delete インターフェイス メソッドをカプセル化する

解決策 1: https://blog.csdn.net/weixin_44590591/article/details/121950152

其他方案后续更新

UI スタイル ライブラリ

ここにいくつかあります: element-plus、Vant UI、Ant Design Vue、vuetify