npm init @vitejs/app
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
// 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
资料
- .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
