npm init @vitejs/app
yarn create @vitejs/app
Project build (Ts version)
- npm 6.x npm init @vitejs/app vue-admin-pro --template vue-ts
- npm 7 +, additional double horizontal lines are required: npm init @vitejs/app vue-admin-pro -- --template vue-ts
- yarn yarn create @vitejs/app vue-admin-pro --template vue-ts
Supported template presets include:
- vanilla
- vue
- vue-ts
- react
- react-ts
- preact
- preact-ts
- lit-element
- lit-element-ts
Project structure
├── node_modules Installed dependent packages ├── dist Generate packaged files ├── public The statement resources in will be copied to the output directory(dist)in │ └── favicon.ico ├── src │ ├── assets Place some static resources, such as pictures, icons and fonts │ └── logo.png │ ├── components Common component │ └── HelloWorld.vue │ ├── App.vue Top level routing of routing component │ ├── main.ts Vue Entry file │ └── shims-vue.d.ts ├── .gitignore ├── index.html ├── package-lock.json npm Package configuration file, dependent package minor version information ├── package.json npm Package configuration file and dependent package information ├── README.md Project description ├── tsconfig.json typescript to configure └── vite.config.ts
function
npm run dev
Installation dependency
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
Project structure (Vue-I18n, Vue router, Vuex, Ant Design)
├── node_modules Installed dependent packages ├── dist Generate packaged files ├── public The statement resources in will be copied to the output directory(dist)in │ └── favicon.ico ├── src │ ├── assets Place some static resources, such as pictures, icons and fonts │ └── logo.png │ ├── components Common component │ └── HelloWorld.vue │ ├── locales internationalization │ └── index.ts │ ├── plugins Store third-party plug-ins │ └── index.ts │ ├── router Routing configuration │ └── index.ts │ ├── store Vuex State management │ └── index.ts Automatic loading module │ ├── views Page level components │ ├── About.vue │ └── Home.vue │ ├── App.vue Top level routing of routing component │ ├── main.ts Vue Entry file │ └── shims-vue.d.ts ├── .gitignore Git Ignore rule ├── index.html ├── package-lock.json npm Package configuration file, dependent package minor version information ├── package.json npm Package configuration file and dependent package information ├── README.md Project description ├── tsconfig.json typescript to configure └── vite.config.ts
##### Configure routing
// 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 routerIntegrated routing
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from "./router"
const app = createApp(App);
app.use(router).mount("#app")[configuration 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
- Load on demand // 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 configuration
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
- *
Front end automation
##### Elint specification (code checking tool)
npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
Description:
- Eslint: the core code of eslint
- @Typescript ESLint / parser: the parser of ESLint, which is used to parse typescript to check and standardize typescript code
- @Typescript ESLint / ESLint plugin: This is an ESLint plug-in, which contains various defined specifications for detecting typescript code
- Add profile 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
data
- EsLint Rules
- . eslintrc.js configuration 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 configuration
*.sh node_modules *.md *.woff *.ttf .vscode .idea dist /public /docs .husky .local /bin Dockerfile
- *
##### Prettier beautification (front end code formatting tool)
npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev
Description:
- Prettier: the core code of the prettier plug-in
- ESLint config - prettier: resolve the conflict between the style specification in ESLint and the style specification in prettier. The style specification in prettier shall prevail and the style specification in ESLint will automatically become invalid
- ESLint plugin prettier: use prettier as the ESLint specification
- New profile // Prettier.config.js module.exports = {printwidth: 80, / / line breaking exceeds the maximum value tabWidth: 2, / / indent bytes useTabs: false, / / indent without tab, use space semi: false, / / add semicolon singleQuote: true at the end of the sentence, / / use single quotation marks instead of double quotation marks trailingComma: 'none', / / in the object or number Whether to add a comma after the last element of the group, bracketSpacing: true, / / add a space "{foo: bar}" jsxbacketsameline: true between the object, array bracket and text, / / whether to put '>' in a separate line in jsx, arrowparens: 'avoid', / / (x) = > {} Whether there should be parentheses when there is only one arrow function parameter. Avoid: omit parentheses insertpragma: false, / / Prettier can insert a special comment of @ format at the top of the file to indicate that the modified file has been formatted by Prettier. endOfLine: 'auto', / / the end is \ n \r \n\r auto}
- Add Prettier to 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: {} }
Description:
- Prettier / @ typescript ESLint: invalidate the style specification in @ typescript- eslint and follow the style specification in prettier * plugin:prettier/recommended: use the style specification in prettier. If ESLint detects the format problem of prettier, it will also throw the format problem in the form of error
New command
// 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}\""
}implement
npm run lint:prettier npm run lint:eslint
Front end code style automation
npm install husky lint-staged @commitlint/config-conventional @commitlint/cli --save-dev