Vue3 syntactic sugar

Based on mobile configuration.

Vite website

Advantages:

  1. The speed of light to start
  2. Hot Module Replacement
  3. According to the need to compile

Scaffolding function

  1. Vant3.0 Mobile component UI library
  2. Axios network data interaction
  3. Vuex status management
  4. Vue-router Manages routes
  5. Postcss-px-to-viewport Move px to VW /vh
  6. Less precompiled
  7. Autoprefixer Automatic completion
  8. Typescript grammar
  9. Window.$cancelRequest() cancels the request, and an error is reported after initialization (i.e., before axios requests data).

@[toc]

Environment variables, AXIos, px to VW /vh, and browser prefixes

Use Vite to build a React Mobile scaffolding.

Routing vue – router4.0

The installation

npm install vue-router@4

configuration

Create a new SRC /router/router.ts file with the following contents:

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
import { sessions } from '@/utils/utils'

const routes: Array<RouteRecordRaw> = [
  { 
    path: '/'.redirect: '/home'
  },
  { 
    path: '/home'.name: 'home'.component: () = > import(/* webpackChunkName: "home" */ '@/pages/home/home.vue'),/ / lazy loading
    meta: {
      showFooter: true.// Whether to display the bottom navigation
      requireAuth: false.// Whether authorization is required, that is, token}}, {path: '/about'.name: 'about'.component: () = > import(/* webpackChunkName: "about" */ '@/pages/about/about.vue'),
    meta: {
      showFooter: true.requireAuth: false,}}, {path: '/user'.name: 'user'.component: () = > import(/* webpackChunkName: "user" */ '@/pages/user/user.vue'),
    meta: {
      requireAuth: true,}}, {path: '/login'.name: 'login'.component: () = > import(/* webpackChunkName: "login" */ '@/pages/login/login.vue'),
    meta: {
      requireAuth: false,}},];const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

// Route interception
router.beforeEach((to, from, next) = > {
  if(to.meta.requireAuth && ! sessions.get('token')) { // Determine the login permission
    next({ path: '/login'.query: {redirect:to.fullPath}});
  } else { 
    next()
  }
})

export default router;
Copy the code

State management VUx4.0

The installation

npm install vuex@next --save

Configuration and Use

The new store/store. Ts:

import { createStore } from 'vuex';

export default createStore({
  state: {
    VX_IS_LOGIN: false.VX_TOKEN: ' ',},mutations: {
    setToken(state, data) {
      state.VX_TOKEN = data
      state.VX_IS_LOGIN = data ? true : false}},actions: {},modules: {},});Copy the code

Combination of API:

<template>
  <div>login</div>
  <Button type="primary" @click="login">The login</Button>
</template>

<script setup lang="ts">
import {useRouter} from 'vue-router'
import {useStore} from 'vuex' // Combine API functions
import {Button} from 'vant'
import { sessions } from '.. /.. /utils/utils'
let store = useStore()
let router = useRouter()

const login = () = > {
  sessions.set('token'.1122323)
  store.commit('setToken'.1122323) // Set the global status
  let page:any = router.currentRoute.value.query.redirect
  router.replace(page)
}
</script>


<style lang="less">
</style>
Copy the code

UI components vant @ 3

The installation

npm i vant@next -S

use

Vant components can be used directly in < Script Setup > without component registration.

<script setup>
  import { Button } from 'vant';
</script>

<template>
  <Button />
</template>
Copy the code

Less

Install the less

npm install less less-loader --dev

use

<style scoped lang="less">
</style>
Copy the code

Scoped: Private style

Less global variable

New SRC/global. Less;

@mainColor: #ff6600;
Copy the code

Configuration vite. Config. Ts

const path = require("path");
export default defineConfig({
    css: {
        preprocessorOptions: {
          less: {
            javascriptEnabled: true.modifyVars: {
              hack: `true; @import (reference) "${path.resolve('src/global.less')}"; `,},}},}})Copy the code

Use:

<style scoped lang="less">
h1{
  font-size: 32px;
  color: @mainColor;
}
</style>
Copy the code

git

Gitee.com/mosowe/vue3…

npm

npm install -g yo npm install -g generator-vite-vue-app yo vite-vue-app