Vue3 + vite + TS + element plus construction project (II)

Time:2022-5-5

In the last phase, we installed vite, managed the code to git, and used eslint to verify. Next, we installed vuex, router, SCSS, alias settings, etc. in the project

1、 Vuerouter

Official website:https://router.vuejs.org/guid…

1. Installation

npm install [email protected]

2. After installation, we will create a router directory under SRC directory and an index under router TS file

index. TS file content

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'home',
    component: () => import('../views/home/index.vue')
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/login/index.vue')
  }
]
const router = createRouter({
  History: createwebhashhistory(), // routing mode
  Routes // routing rules
})

export default router

Here’s something to note:
(1) History: createwebhashhistory(), which calls the method and uses the hash mode
(2) History: createwebhistory(), using the history mode of H5
(3) In order to standardize the development of typescript, the routerecordraw type limit of routing object is added. The advantage: it allows developers to add user-defined attributes in the basic routing, but sometimes some fields need to be extended to customize the application.
(4) , because the default path is home / index Vue, so in app Entry to be set in Vue
Vue3 + vite + TS + element plus construction project (II)

3. Quote
In main Introduction into TS

import router from './router'

createApp(App).use(router).mount('#app')

2、 Vuex

Official website:https://vuex.vuejs.org/zh/ind…

1. Installation

npm install [email protected] --save

2. Create a new store directory in the SRC directory and an index. In the store directory ts,

import { InjectionKey } from 'vue'
import { createStore, useStore as baseUseStore, Store } from 'vuex'

export interface State {
    count: number
  }

export const key: InjectionKey<Store<State>> = Symbol('')
// Create a new store instance.
export const store = createStore<State>({
  state: {
    count: 0
  }
})

//Define your own 'usestore' composite function
export function useStore () {
  return baseUseStore(key)
}

3. In main Introduction into TS

import store from './store'

createApp(App).use(router).use(store).mount('#app')

4. Use in page

We are at login / index Vue page

Vue3 + vite + TS + element plus construction project (II)

3、 Alias configuration

Official website:https://vitejs.cn/config/#res…

1. Configure vite config. ts

Note: the path and ts of this piece cannot be recognized, so @ types / node should be installed  

npm i @types/node -D

Vue3 + vite + TS + element plus construction project (II)

2. Configure tsconfig json

Note: the baseurl of this piece needs to be configured, otherwise the return is wrong

Vue3 + vite + TS + element plus construction project (II)

4、 CSS style management

Official website:https://vitejs.cn/config/#css…

1. Install SCSS

npm install -D sass   

2. Create a new styles directory under SRC directory, and create the following files

common. SCSS – > global public style
index. SCSS – > organization unified export
mixin. SCSS – > Global mixin
transition. SCSS – > global transition animation style
variables. SCSS – > Global sass variable

Vue3 + vite + TS + element plus construction project (II)

3. In index Introduce other files into SCSS
Vue3 + vite + TS + element plus construction project (II)

4. In main Introduce index into ts scss

import './styles/index.scss'

5. Specify the options passed to the CSS preprocessor. The configuration is as follows. In vite config. In TS

Vue3 + vite + TS + element plus construction project (II)

Recommended Today

Modify user information changeinfo

When judging the persistence layer: Problem: there is such a problem when modifying user information. For example: the user’s email is not required. It was not empty originally. At this time, the user deletes the mailbox information and submits it. At this time, if it is not empty to judge whether it needs to be […]