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

作者: 孙洪雨 | 来源:发表于2021-02-19 10:00 被阅读0次

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

$\color{LightSeaGreen}{欲要利其事,必先利其器}$

安装依赖

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

// 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',          // 结尾是 \n \r \n\r 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

网友评论

本文标题：Vue3+Vite+Ts+Antd2.x项目搭建

本文链接：https://www.haomeiwen.com/subject/paioxltx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

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

项目构建（Ts版）

支持的模板预设包括：

项目结构

安装依赖

配置路由

整合路由

配置 Vite

Ant Design of Vue

前端自动化

Elint规范 (代码检查工具)

描述：

资料

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

描述：

描述：

新增命令

执行

前端代码风格自动化

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Vue

项目·源码

开源项目

前端开发那些事儿