Vite has been updated to version 2.0, I have not played, these days I use Vite2.0, Vue3.0, typescript to build a simple background management system

Go straight to the hands-on

Start building the basic template

Use the NPM command: NPM init. vitejs/app

Enter the project name

Select the VUE-TS template

Go to package.json and install the package

Enter the yarn, CNPM I, or NPM I command

Iii. Overview of project folders

Node_modules — Dependency folder

Public — Public folder

SRC — Main project folder

.gitignore — Excludes git from committing configuration files

Index.html — Entry file

Package. json — Module description file

Tsconfig. json — TS configuration file

Vite. Config. ts — Vite configuration file

SRC folder overview

Assets — Static folder

Components – Components folder

App.vue — Page file

Main. ts — Project entry file

Shims-vue.d. ts — Type definition file (description file)

Create an alias for vite

Open the vite.config.ts file and add the following code:

const { resolve } = require('path')

resolve:{ alias: {'@': resolve(__dirname, 'src')}}

5. Configure tsconfig.json

{
  "compilerOptions": {
    // Allow default imports from modules that do not have default exports set. This does not affect the output of the code, just for type checking.
    "allowSyntheticDefaultImports": true.// Resolve the base directory for non-relative module names
    "baseUrl": "."."esModuleInterop": true.// Import helper functions from tslib (such as __extends, __rest, etc.)
    "importHelpers": true.// Specify which module system code to generate
    "module": "esnext".// Decide what to do with the module.
    "moduleResolution": "node".// Enable all strict type checking options.
    // Enable --strict = enable --noImplicitAny, --noImplicitThis, --alwaysStrict,
    / / - strictNullChecks and - strictFunctionTypes and - strictPropertyInitialization.
    "strict": true.// Generate the corresponding.map file.
    "sourceMap": true.// Ignore type checking for all declaration files (*.d.ts).
    "skipLibCheck": true.// Specify the ECMAScript target version
    "target": "esnext".// The type to include declares a list of file names
    "types": []."isolatedModules": true.// List of module names to baseUrl pathmaps.
    "paths": {
      "@ / *": [
        "src/*"]},// A list of library files that need to be imported during compilation.
    "lib": [
      "ESNext"."DOM"."DOM.Iterable"."ScriptHost"]},"include": [
    "src/**/*.ts"."src/**/*.tsx"."src/**/*.vue"."tests/**/*.ts"."tests/**/*.tsx"]."exclude": [
    "node_modules"]}Copy the code

Vi. Upgrade App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script lang="ts">
import { onMounted } from 'vue'

export default {
  setup(){}}</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>
Copy the code

Install ESLint

Enter the command: yarn add –dev eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue @typescript-eslint/parser @typescr ipt-eslint/eslint-plugin

Create the esLint configuration file.eslintrc.js in the root directory

module.exports = {
	parser: 'vue-eslint-parser'.parserOptions: {
		parser: '@typescript-eslint/parser'.ecmaVersion: 2020.sourceType: 'module'.ecmaFeatures: {
			jsx: true}},extends: [
		'plugin:vue/vue3-recommended'.'plugin:@typescript-eslint/recommended'.'prettier/@typescript-eslint'.'plugin:prettier/recommended'].rules: {
		'@typescript-eslint/ban-ts-ignore': 'off'.'@typescript-eslint/explicit-function-return-type': 'off'.'@typescript-eslint/no-explicit-any': 'off'.'@typescript-eslint/no-var-requires': 'off'.'@typescript-eslint/no-empty-function': 'off'.'vue/custom-event-name-casing': 'off'.'no-use-before-define': 'off'.// 'no-use-before-define': [
		// 'error',
		/ / {
		// functions: false,
		// classes: true,
		/ /},
		/ /,
		'@typescript-eslint/no-use-before-define': 'off'.// '@typescript-eslint/no-use-before-define': [
		// 'error',
		/ / {
		// functions: false,
		// classes: true,
		/ /},
		/ /,
		'@typescript-eslint/ban-ts-comment': 'off'.'@typescript-eslint/ban-types': 'off'.'@typescript-eslint/no-non-null-assertion': 'off'.'@typescript-eslint/explicit-module-boundary-types': 'off'.'@typescript-eslint/no-unused-vars': [
			'error',
			{
				argsIgnorePattern: '^h$'.varsIgnorePattern: '^h$'}].'no-unused-vars': [
			'error',
			{
				argsIgnorePattern: '^h$'.varsIgnorePattern: '^h$'}].'space-before-function-paren': 'off'.quotes: ['error'.'single'].'comma-dangle': ['error'.'never']}};Copy the code

Create a prettier. Config. Js

module.exports = {
  printWidth: 100.tabWidth: 2.useTabs: false.semi: false.// Open comma
  vueIndentScriptAndStyle: true.singleQuote: true./ / single quotation marks
  quoteProps: 'as-needed'.bracketSpacing: true.trailingComma: 'none'.// Final semicolon
  jsxBracketSameLine: false.jsxSingleQuote: false.arrowParens: 'always'.insertPragma: false.requirePragma: false.proseWrap: 'never'.htmlWhitespaceSensitivity: 'strict'.endOfLine: 'lf'
}
Copy the code

Install VUE-Router4

Enter the command: NPM install vue-router@4 –save

Create the router folder under SRC and create the index.ts file in it.

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";

const container = () = > import('@/pages/container/container.vue');
const login = () = > import('@/pages/login/login.vue');

const routes: Array<RouteRecordRaw> = [
	{ path: ' '.redirect: '/login' },
	{
		path: '/'.component: container,
		children: []}, {path: '/login'.name: 'login'.component: login
	}
]

const router = createRouter({
	history: createWebHistory(),
	routes
})

export default router
Copy the code

Introduced in main.ts

Install vuEX

Enter the command: NPM install vuex@next –save

Ts, getters. Ts, mutations. Ts, actions. Ts files.

index.ts

import { createStore } from "vuex";
import getters from "./getters";
import mutations from "./mutations";
import actions from "./actions";

export default createStore({
	state: {
		userInfo: JSON.parse(localStorage.getItem("userInfo") as string) || {}
	},
	getters,
	mutations,
	actions,
})
Copy the code

Introduced in main.ts

Install Element-Plus

Enter the command: NPM install element-plus –save

I’m using full introduction here:

It can also be introduced according to the needs of the project:

First enter the command: NPM install vite-plugin-style-import -d

Then, change the viet.config.js to:

Introduce.scSS style:

Make sure you have the SASS dependencies installed and introduce the elemental-plus/Packages /theme-chalk/ SRC /base.scss files in the entry file

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'

export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [{
        libraryName: 'element-plus'.esModule: true.ensureStyleFile: true.resolveStyle: (name) = > {
          name = name.slice(3)
          return `element-plus/packages/theme-chalk/src/${name}.scss`;
        },
        resolveComponent: (name) = > {
          return `element-plus/lib/${name}`; },}]})Copy the code

Introduce.css styles

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'

export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [{libraryName: 'element-plus'.esModule: true.ensureStyleFile: true.resolveStyle: (name) = > {
            return `element-plus/lib/theme-chalk/${name}.css`;
          },
          resolveComponent: (name) = > {
            return `element-plus/lib/${name}`; },}]})Copy the code

conclusion

This is the end of the preparatory work, the next is to build the sidebar and login interface. I have preliminarily built the infrastructure of background management system, and have placed my GitHub warehouse. Welcome brothers to give me a start. The following features are still under development, so stay tuned.

Attached is the warehouse address: github.com/wuguanfei/v…