提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

Vue3+Vite+Ts+Antd2.x项目搭建

项目
2023-03-20 14:59:28 时间

NPM

npm init @vitejs/app

Yarn

yarn create @vitejs/app
项目构建（Ts版）
  • npm 6.x npm init @vitejs/app vue-admin-pro --template vue-ts
  • npm 7+, 需要额外的双横线: npm init @vitejs/app vue-admin-pro -- --template vue-ts
  • yarn yarn create @vitejs/app vue-admin-pro --template vue-ts

支持的模板预设包括：

  • vanilla
  • vue
  • vue-ts
  • react
  • react-ts
  • preact
  • preact-ts
  • lit-element
  • lit-element-ts

项目结构

├── node_modules                                       安装的依赖包
├── dist                                               生成打包后文件
├── public                                             中的表态资源会被复制到输出目录(dist)中
│   └── favicon.ico
├── src
│   ├── assets                                         放置一些静态资源，例如图片，图标，字体
│       └── logo.png
│   ├── components                                     公共组件
│       └── HelloWorld.vue
│   ├── App.vue                                        路由组件的顶层路由
│   ├── main.ts                                        Vue 入口文件
│   └── shims-vue.d.ts
├── .gitignore 
├── index.html
├── package-lock.json                                  npm包配置文件、依赖包小版本信息
├── package.json                                       npm包配置文件、依赖包信息
├── README.md                                          项目说明
├── tsconfig.json                                      typescript 配置
└── vite.config.ts

运行

npm run dev
安装依赖

NPM

npm install vue-i18n@next 
npm install vue-router@4
npm install vuex@next --save
npm install ant-design-vue@next --save
npm install axios --save
npm install nprogress --save
npm install less less-loader --save-dev

项目结构（Vue-I18n、Vue-Router、Vuex、Ant Design）

├── node_modules                                       安装的依赖包
├── dist                                               生成打包后文件
├── public                                             中的表态资源会被复制到输出目录(dist)中
│   └── favicon.ico
├── src
│   ├── assets                                         放置一些静态资源，例如图片，图标，字体
│       └── logo.png
│   ├── components                                     公共组件
│       └── HelloWorld.vue
│   ├── locales                                        国际化
│       └── index.ts
│   ├── plugins                                        存放第三方插件
│       └── index.ts
│   ├── router                                         路由配置
│       └── index.ts
│   ├── store                                          Vuex状态管理
│       └── index.ts                                   自动装载模块
│   ├── views                                          页面级组件
│       ├── About.vue
│       └── Home.vue     
│   ├── App.vue                                        路由组件的顶层路由
│   ├── main.ts                                        Vue 入口文件
│   └── shims-vue.d.ts
├── .gitignore                                         Git忽略规则
├── index.html
├── package-lock.json                                  npm包配置文件、依赖包小版本信息
├── package.json                                       npm包配置文件、依赖包信息
├── README.md                                          项目说明
├── tsconfig.json                                      typescript 配置
└── vite.config.ts

##### 配置路由

// router/index.ts
import { createRouter, createWebHistory } from "vue-router";
import Home from "@/views/Home.vue"
​
const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "@/views/About.vue")
  }
]
​
const router = createRouter({
  history: createWebHistory(),
  routes,
});
​
export default router

整合路由

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from "./router"
const app = createApp(App);
app.use(router).mount("#app")

[配置 Vite](https://links.jianshu.com/go?to=https%3A%2F%2Fcn.vitejs.dev%2Fconfig%2F)

// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
const path = require("path");
​
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

Ant Design of Vue

  • 按需加载 // plugins/antd.ts import type { App } from "vue"; import { ConfigProvider, Button } from "ant-design-vue"; import "ant-design-vue/dist/antd.css"; export function setupAntd(app: App<Element>) { app.use(ConfigProvider).use(Button); } // plugins/index.ts export { setupAntd } from "../plugins/antd"
  • .gitignore 配置 Editor directories and files .idea .vscode *.suo .ntvs *.njsproj *.sln package-lock.json .DS_Store node_modules /dist local env files .env.local .env.*.local Log files npm-debug.log* yarn-debug.log* yarn-error.log* Editor directories and files .idea .vscode *.suo .ntvs *.njsproj *.sln .sw
    • *
前端自动化

##### Elint规范 (代码检查工具)

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

描述：

  • eslint: EsLint的核心代码
  • @typescript-eslint/parser：ESLint的解析器，用于解析typescript，从而检查和规范Typescript代码
  • @typescript-eslint/eslint-plugin：这是一个ESLint插件，包含了各类定义好的检测Typescript代码的规范
  • 添加配置文件 npx eslint --init √ How would you like to use ESLint? · problems √ What type of modules does your project use? · esm √ Which framework does your project use? · vue √ Does your project use TypeScript? · No / Yes √ Where does your code run? · node √ What format do you want your config file to be in? · JavaScript

资料

  • EsLint Rules
  • .eslintrc.js 配置 module.exports = { env: { es2021: true, node: true, }, extends: [ 'eslint:recommended', 'plugin:vue/essential', 'plugin:@typescript-eslint/recommended' ], parserOptions: { ecmaVersion: 12, parser: '@typescript-eslint/parser', sourceType: 'module', }, plugins: ['vue', '@typescript-eslint'], rules: {}, }
  • .eslintignore 配置 *.sh node_modules *.md *.woff *.ttf .vscode .idea dist /public /docs .husky .local /bin Dockerfile
    • *

##### Prettier美化（前端代码格式化工具)

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

描述：

  • prettier：prettier插件的核心代码
  • eslint-config- prettier：解决ESLint中的样式规范和prettier中样式规范的冲突，以prettier的样式规范为准，使ESLint中的样式规范自动失效
  • eslint-plugin-prettier：将prettier作为ESLint规范来使用
  • 新建配置文件 // prettier.config.js module.exports = { printWidth: 80, // 超过最大值换行 tabWidth: 2, // 缩进字节数 useTabs: false, // 缩进不使用tab，使用空格 semi: false, // 句尾添加分号 singleQuote: true, // 使用单引号代替双引号 trailingComma: 'none', // 在对象或数组最后一个元素后面是否加逗号 bracketSpacing: true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }" jsxBracketSameLine: true, // 在jsx中把'>' 是否单独放一行 arrowParens: 'avoid', // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号 insertPragma: false, // Prettier可以在文件的顶部插入一个 @format的特殊注释，以表明改文件已经被Prettier格式化过了 endOfLine: 'auto', // 结尾是 auto }
  • 将Prettier添加到EsLint中 // .eslintrc.js module.exports = { env: { browser: true, es2021: true, node: true }, extends: [ 'eslint:recommended', 'plugin:vue/essential', 'plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended', 'prettier/@typescript-eslint' ], parserOptions: { ecmaVersion: 12, parser: '@typescript-eslint/parser', sourceType: 'module' }, plugins: ['vue', '@typescript-eslint'], rules: {} }

描述：

  • prettier/@typescript-eslint：使得@typescript- eslint中的样式规范失效，遵循prettier中的样式规范 * plugin:prettier/recommended：使用prettier中的样式规范，且如果使得ESLint会检测prettier的格式问题，同样将格式问题以error的形式抛出

新增命令

// package.json
"scripts": {
    "dev": "vite",
    "build": "vuedx-typecheck . && vite build",
    "serve": "vite preview",
    "lint:eslint": "eslint "{src}/**/*.{vue,ts,tsx}" --fix",
    "lint:prettier": "prettier --write --loglevel warn "src/**/*.{js,json,ts,tsx,css,less,scss,vue,html,md}""
 }

执行

npm run lint:prettier
npm run lint:eslint

前端代码风格自动化

npm install husky lint-staged @commitlint/config-conventional @commitlint/cli --save-dev

相关文章