Vue3 + Vite2 + TypeScript development template construction

Note: The project template used in this article is: vue3-template (click to view the source code)

1. Build a framework

Vue3 can still be created using VUE-CLI, but here we are talking about creating Vue + Ts projects using Vite.

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

or

$ yarn create vite-app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev
Copy the code

The creation process will give you the option of using the Vue framework, using Vue + Ts, to get the following structure

.Heavy Exercises ── heavy exercises ── heavy exercises ── heavy exercises ── heavy exercises ── heavy exercises ── heavy exercises ── heavy exercises ── heavy exercisesCopy the code

As you can see, the template we created with VUe-CLI was like a hardcover room, ready to move in, whereas the template we created with Vite only had a framework that required us to add functionality ourselves. Now let’s create some of the basic functionality necessary.

2. Rough decoration

The basic framework only provides:

componentsCommon components
assetsResource file

The structure after we create the module:

. ├ ─ ─ public └ ─ ─ the SRC ├ ─ ─ assets │ ├ ─ ─ ts │ ├ ─ ─ img │ └ ─ ─ SCSS ├ ─ ─ components │ ├ ─ ─ the Header │ └ ─ ─global├ ─ ─ interface ├ ─ ─ enum ├ ─ ─ the plugins ├ ─ ─ the router ├ ─ ─ services ├ ─ ─ store ├ ─ ─ utils ├ ─ ─ views │ ├ ─ ─ home │ └ ─ ─ notFound ├ ─ ─ ├── exercises, exercises, exercises, exercisesCopy the code

Next, I will introduce the functions of each module:

Views

Used to hold all pages. Internally, a template file, home, was created to be used as the home page, introducing some examples of functionality.Copy the code

Router

Router. ts is used to store the Router configuration. Router.interceptor. ts is used to process events triggered by the Router.Copy the code

Composables

A method used to store the interior of setup in a vue file, usually a function point.Copy the code

Interface

The data typeCopy the code

Enum

Enumerated valuesCopy the code

Plugins

The import plug-in introduces the style that VantUI 1.ant. Ts introduces Vant components on demandCopy the code

Services

3. Request. Ts encapsulates the use of AXIosCopy the code

Store

Vuex introduced a vuex-PersistedState data persistence plug-inCopy the code

Utils

The global methodCopy the code

3. Soft outfit

The alias of a file system path is specified

For ease of use during development, I used fixed characters instead of paths in vite.config.ts

// Path abbreviation
resolve: {
    alias: [{find: '@views'.replacement: resolve(__dirname, 'src/views')}, {find: '@services'.replacement: resolve(__dirname, 'src/services')}, {find: '@images'.replacement: resolve(__dirname, 'src/assets/img')}, {find: '@scss'.replacement: resolve(__dirname, 'src/assets/scss')},]}Copy the code


// If you want to introduce images in your code, you can use:
<img src="~@images/bg_404.png" />

// Import a page or component:
import Home from '@views/home/index.vue'

Copy the code

Scss pretreatment

SCSS can be used directly in Vite without the need to import additional loaders

. ├ ─ ─... . └ ─ ─ SCSS ├ ─ ─ the main SCSS public style ├ ─ ─ a mixin. SCSS public methods ├ ─ ─ reset. The SCSS default styles └ ─ ─ variable. The SCSS public variablesCopy the code

The 'SCSS' file I wrote 4 main common styles: 1. These styles' mian. SCSS 'will be used in almost every page, write some basic styles of the page. 2. 'mixin. SCSS' writes some common 'SCSS' methods: positioning, image import, page scrolling, text restrictions, horizontal lines, etc. 3. 'reset. SCSS' is the initial setting page. 4. 'variable. SCSS' defines common variables and all colors for subsequent modifications.Copy the code

// viet.config. js adds CSS global preprocessing
  css: {preprocessorOptions: {
      scss: {
        // Each page can use variables and methods directly from both files without further introduction
        additionalData: ` @import "src/assets/scss/mixin.scss"; @import "src/assets/scss/variable.scss"; `}}}// Use in the home page
// Add a 1px line to the text
h1 {
    position: relative;
    @include hairline(bottom, $colorRed);
}
Copy the code

Viewport adaptation

This template uses viewport adaptation. For details, go to Lib-Flexible and ViewPort — On Mobile Adaptation Alternatives.

Packaging by environment

The vite website has detailed instructions.

Env can be invoked using import.meta. Env in a page, but import.meta.

import { defineConfig, loadEnv } from 'vite' / / into the loadEnv

// Use loadEnv(mode, process.cwd()) to get the contents of.env
if (loadEnv(mode, process.cwd()).VITE_VIS) {
    // ...
}
Copy the code

Packaging analysis

The packaging analysis configuration needs to be used after the environment packaging configuration is complete

The installationyarn add -D rollup-plugin-visualizer.
create.env.visEnvironment variables addedVITE_VIS=true.
invite.config.tsAdded plug-ins in.

import visualizer from "rollup-plugin-visualizer"

// Package analysis
if (loadEnv(mode, process.cwd()).VITE_VIS) {
    plugins.push(
        visualizer({
        open: true.gzipSize: true.brotliSize: true,})); }Copy the code

inpackage.jsonnew"build:vis": "vue-tsc --noEmit && vite build --mode vis".
runyarn build:visThe analysis packaging page appears to look at the volume of each package to optimize the code and reduce the overall volume.

The configuration file

Placing configuration files that can be changed freely even after packaging makes it easy for the manager to change fields when deploying the project.

.Heavy Exercises ── heavy exercises └ ─ ─ config. Local. Js// Add this script to index.html to introduce the configuration file
<script>
  document.write(unescape("%3Cscript src='./config.local.js? _t="+ Math.random() +"' type='text/javascript'%3E%3C/script%3E"));
</script>

// File contents
window.LOCAL_CONFIG = {
  IS_OPEN_VCONSOLE: true
}
Copy the code

4. To be continued…

In fact, “decoration” can already achieve “carry bag check-in”, but in order to improve the convenience of use, the following functions will be added or continuously improved in the future: