作为一个从事计算机视觉的前端小白, 希望用这个记录的备忘录帮我实现对简单前端的复现.

这个记录目前还不能入专业前端的法眼, 有些贻笑大方之家了, 如果有误, 请指教.

初始化Vue3项目

npm init vite@latest

output:

✔ Project name: … {your_front_name}
✔ Target directory "{your_front_name}" is not empty. Remove existing files and continue? … yes
✔ Select a framework: › Vue
✔ Select a variant: › TypeScript

Scaffolding project in {path}/{to}/{your_front_name}...

Done. Now run:

  cd your_front_name
  npm install
  npm run dev

为这个本地代码库folder做git

cd existing_folder
git init --initial-branch=main
git remote add origin git@{ip adress}:{urser_name}/{your_front_name}.git
git add .
git commit -m "Initial commit"
git push -u origin main

vue router & vuex

npm install vue-router vuex --save-dev

typescript & ESLint

npm i eslint typescript -D

安装element Plus

npm install element-plus --save

一些我用到的依赖包

npm install axios
npm install --save @antv/g6

tsconfig.json

{
  "compilerOptions": {
    "types": ["./node_modules/element-plus/global"],
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "esModuleInterop": true,
    "importHelpers": true,

    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "noEmit": true,
    "jsx": "preserve",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "node_modules/element-plus/global.d.ts"],
  "references": [{ "path": "./tsconfig.node.json" }],
  "exclude": ["node_modules"]
}

src/vite-env.d.ts

/// <reference types="vite/client" />
declare module '*.vue' {
  import { DefineComponent } from "vue"
  const component: DefineComponent<{}, {}, any>
  export default component
}

src/shim.d.ts

/* eslint-disable */
import type { DefineComponent } from 'vue'

declare module '*.vue' {
  const component: DefineComponent<{}, {}, any>
  export default component
}

src/main.ts

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)

app.mount('#app')