Vue3 project construction I am here

The less you know, the less you don’t know

Objective to introduce

First integrate the basic framework: Vue3 + Ant Design + TypeScript + Router + Vuex

Then inject the whole global variable

• app.config.globalProperties
• provide/inject

Installation environment

Align node versions

PowerShell 7.1.0-preview.7
Copyright (c) Microsoft Corporation.

https://aka.ms/powershell
Type 'help' to get help.
PS D:\develop\CodeProject\jsproject> node -v
v14.12.0
Copy the code

Yarn Global environment (VUe3 uses YARN by default)

PS D:\develop\CodeProject\jsproject> npm install -g yarn
Copy the code

Vue3 global environment

PS D:\develop\CodeProject\jsproject> npm install -g @vue/cli
Copy the code

Check whether the installation is successful

PS D:\develop\CodeProject\jsproject> vue -V
vue: The term 'vue' is not recognized as a name of a cmdlet, function, script file, or executable program.
Check the spelling of the name, or if a path was included, verify that the path is correct and try again.
Copy the code

If the above error message occurs, add the following NPM address information to the Windows Path environment variable and restart the DOS window or vscode to verify again.

PS D:\develop\CodeProject\jsproject> npm config get prefix
D:\develop\nodejs\modules\npm

# revalidate
PS D:\develop\CodeProject\jsproject> vue -V
@vue/cli 4.5.6
Copy the code

Initialize the project

Build the project through the wizard

PS D:\develop\CodeProject\jsproject> vue create vue3-study
Vue CLI v4.5.6
? Please pick a preset:
  vue-framework ([Vue 2] router, vuex, less, babel, eslint, unit-jest)
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features	# Select Custom

# Use the space bar to select the options below
? Check the features needed for your project:
>(*) Choose Vue version
 (*) Babel
 (*) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
 (*) Unit Testing
 ( ) E2E Testing
 
# select version 3
 ? Choose a version of Vue.js that you want to start the project with
  2.x
> 3.x (Preview)

# Default carriage return (N) does not use class-style component syntax
? Use class-style component syntax? (y/N) # Default return (Y) to usebabelDo to escape?Use Babel alongside TypeScript (required for modern mode.auto-detected polyfills.transpiling JSX)? (Y/n) # Default return (Y) using history mode (not using hash mode)?Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) # chooseSass/SCSS (with dart-sass)
> Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus# Choose strict mode?Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
> ESLint + Prettier
  TSLint (deprecated) # Save by default?Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) > (*)Lint on save
 ( ) Lint and fix on commit# defaultMochaThe framework andChaiAssert that library?Pick a unit testing solution: (Use arrow keys)
> Mocha + Chai
  JestA separate file by default?Where do you prefer placing config for Babel.ESLint.etc.? (Use arrow keys)
> In dedicated config files
  In package.json# Default return (N) do not set custom name (if enteredy, you can set a self-defined portfolio name for the next project creation, and quickly select your own portfolio.Save this as a preset for future projects? (y/N)

Initializing git repository.Installing CLI plugins. This might take a while.Copy the code

Verify that the project was built successfully

Successfully created project vue3-study.
Get started with the following commands:
$ cd vue3-study
$ npm run serve

PS D:\develop\CodeProject\jsproject> cd vue3-study
PS D:\develop\CodeProject\jsproject\vue3-study> npm run serve
  App running at:
  - Local:   http://localhost:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

No issues found.
# Yarn serve can also be used
Copy the code

Integrate Ant Design UI

Install the library

PS D:\develop\CodeProject\jsproject\vue3-study> npm install ant-design-vue@next -S
Copy the code

Start preparing to import components on demand

Create the plugins subfolder under the SRC directory and create two ts files: index.ts and antd.ts

• /src/plugins/index.ts

import { createApp } from "vue"

/ * * *@description Load all Plugins *@param  {ReturnType<typeofcreateApp>} App Instance of the entire app */
export function loadAllPlugins(app: ReturnType<typeof createApp>) {
  const files = require.context('. '.true./\.ts$/)
  files.keys().forEach((key) = > {
    if(key ! = ='./index.ts') files(key).default(app)
  })
}
Copy the code

• /src/plugins/antd.ts

import { Button, Card, Row, Col, Tag, Form, Input } from "ant-design-vue"
import { createApp } from "vue"

/ * * *@description Manually register antD-VUE components to load on demand *@description Automatically register components under Button, such as Button.Group
 * @param {ReturnType<typeof createApp>} App An instance of the entire app@returns void* /
export default function loadComponent(app: ReturnType<typeof createApp>) {
  app.use(Button)
  app.use(Card)
  app.use(Row)
  app.use(Col)
  app.use(Tag)
  app.use(Form)
  app.use(Input)
}
Copy the code

Modify the import file main.ts

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

import { loadAllPlugins } from "@/plugins"


const app: ReturnType<typeof createApp> = createApp(App)

loadAllPlugins(app)

app
.use(store)
.use(router)
.mount("#app")

Copy the code

Go to HelloWorld.vue and add the button component test under the H1 tag

  <div class="hello">
    <h1>{{ msg }}</h1>
     <a-button type="primary">
        Primary
     </a-button>
Copy the code

At this point the button is displayed but has no style, so the following configuration introduces style as needed. Edit babel.config.js with the plugins attribute added

Ps: If style: "CSS" is changed to style: true, you need to introduce a series of libraries, such as less and less-loader, and install them as prompted

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"].plugins: [['import', {
      libraryName: 'ant-design-vue'.libraryDirectory: 'es'.style: "css"}}]].Copy the code

Introduction of Babel – plugin – the import library

PS D:\develop\CodeProject\jsproject\vue3-study> npm install babel-plugin-import -D
Copy the code

Start the service and the test shows normal

Injecting global variables

Create the config subfolder under the SRC directory and create a ts file under it: app.ts

• /src/config/app.ts

/** Static configuration related to the global application is placed here */
import { message } from "ant-design-vue"

// Prevent a large number of pop-up messages
message.config({
  duration: 2.maxCount: 1
});

const AppConfig = {
  $message: message
}
export { AppConfig }
Copy the code

Modify the main ts

import { AppConfig } from "@/config/app"# test two injection ways app. Config. GlobalProperties = AppConfig app. Dojo.provide ("AppConfig", AppConfig)
Copy the code

Modified. Eslintrc. js, rules configuration item added do not check any type

  rules: {
    ......
    '@typescript-eslint/no-explicit-any': 'off'.Copy the code

The HelloWorld.vue button component adds click events

<a-button type="primary" @click="handleMessage"> Primary </a-button> ...... <script lang="ts"> import { defineComponent, inject, getCurrentInstance } from "vue"; export default defineComponent({ name: "HelloWorld", props: { msg: String }, setup(){ const appConfig: any = inject("AppConfig") const ctx: Any = getCurrentInstance() function handleMessage() {inject appconfig.$message.info('This is a normal message') / / the second globalProperties CTX. AppContext. Config. GlobalProperties. $message. The info (' This is a normal message ')} return { handleMessage } } }); </script>Copy the code

Record on pit

Problems that may occur when choosing Less

Reducing the Less Version

PS D:\develop\CodeProject\jsproject\vue3-study> npm uninstall less
PS D:\develop\CodeProject\jsproject\vue3-study> npm uninstall less-loader
PS D:\develop\CodeProject\jsproject\vue3-study> npm install less@2 -D
PS D:\develop\CodeProject\jsproject\vue3-study> npm install less-loader@5 -D
Copy the code

Follow the error message to install the V16 library

PS D:\develop\CodeProject\jsproject\vue3-study> npm install vue-loader-v16 -D
Copy the code

Problems with missing files in the core-js library

reinstall

PS D:\develop\CodeProject\jsproject\vue3-study> npm install core-js@3 -S
Copy the code