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
