Create a vue project based on vite

3. Verify whether the installation is complete: Open the Windows cmd command line, enter npm --version, and output the version information, the installation is successful, as shown in the figure below

Install yarn tools

Node.js comes with npm package management tool. Yarn is also a package management tool under nodejs. You can choose the appropriate tool according to yourself.

1. Enter: npm install yarn -g on the cmd command line to install globally.

2. Check whether the installation is complete: enter yarn -version in the cmd command line. If the version information is output, the installation is successful, as shown in the figure below.

2. Create a project

1. Enter the command line in the directory where you want to create the project, enter: yarn create vite project name

Choose a frame:

Select attributes:

2. Enter the project directory and enter: cd project name

3. Install dependencies, enter: yarn

4. Run the project, enter: yarn dev --> open a localhost:5173

5. Enter the address into the browser to access. The picture below is the initial page.

3. Sorting out the project directory

Project initial directory structure

public		Static resources (pictures, js files) directory
src	assets	Static resource directory
	components	Component Catalog
	main.js	Entry file
	app.vue	root component
node_modules		Project dependency package
index.html		Default vue mounting element
package.json		Basic information of the current project, project dependency information, command management tool configuration
vite.config.js		Configuration information for the entire project
yarn.lock		Information recorded when the yarn command is run

Project loading process

When using yarn dev to run a project, it will read the commands defined by scripts in the package.json file to call the corresponding instructions.

Then the entry file will be read: src/main.js

Import vue and custom components

Instantiate a Vue and mount the app to the element with the id app in the index.html file

4. Integrated UI component library vant

Configure Vant to be loaded on demand

1.Install the module

//Install vant

yarn add vant

//Load modules on demand

yarn add unplugin-vue-components -D

2. Configure on-demand loading in the vite.config.js file

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import Components from 'unplugin-vue-components/vite'

import { VantResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({

        plugins: [

                vue(),

                Components({

                        resolvers: [VantResolver()],

                }),

        ],

});

Use components

After completing the installation and configuration of vant, you can use Vant components directly in the template. unplugin-vue-components will parse the template and automatically register the corresponding components.

Vant official documentation: https://vant-contrib.gitee.io/vant/#/zh-CN

Use components in src/App.vue:

<template>
<van-button type="primary">Primary button</van-button>
</template>

Introducing styles for function components

Some components in Vant are provided in the form of functions, including Toast, Dialog, Notify and ImagePreview components

Just import and use where needed

// Toast

import { showToast } from 'vant';

import 'vant/es/toast/style';

// Dialog

import { showDialog } from 'vant';

import 'vant/es/dialog/style';

// Notify

import { showNotify } from 'vant';

import 'vant/es/notify/style';

// ImagePreview

import { showImagePreview } from 'vant';

import 'vant/es/image-preview/style';

5. Integrated UI component library NutUI

Configure on-demand loading of NutUI

1.Installation

yarn add @nutui/nutui

2. Install the plug-in NutUI style to load the plug-in on demand

yarn add consola

yarn add vite-plugin-style-import

3. Configure NutUI style loading on demand in the vite.config.js file

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'

// add here
import { createStyleImportPlugin } from 'vite-plugin-style-import'

export default defineConfig({
   plugins: [
       vue(),
       Components({
   resolvers: [VantResolver()],
   }),
       // add here
       createStyleImportPlugin({
           resolves: [{
           libraryName: '@nutui/nutui',
           libraryNameChangeCase: 'pascalCase',
           resolveStyle: (name) => {
           return `@nutui/nutui/dist/packages/${name.toLowerCase()}/index.scss`
           },
           }]
       }),
   ],
   // add here
   css: {    preprocessorOptions: {            scss: {                // Configure nutui global scss variables                additionalData: `@import "@nutui/nutui/dist/styles/variables.scss";`            }    }    }, })

Use components

NutUI component official documentation: https://nutui.jd.com/h5/vue/4x/#/zh-CN/component/button

NutUI will not automatically import like Vant. NutUI's on-demand automatic loading only has style files, so we need to import them manually.

Use components to define the components to load:

Create a new plugins/nutui.js under src. If you need to add components in the future, you only need to add them to this file.

//Used to define the component name to be loaded
import { Button, } from '@nutui/nutui' //Export export, only after exporting can other files be imported export const nutUiComponents = [ Button, ];

Import in src/main.js file

//Add import

import { nutUiComponents } from './plugins/nutUI';

//Create a vue instance based on App.vue (root component)
const app = createApp(App)

//Use imported NutUI components globally
nutUiComponents.forEach((item)=>{ app.use(item) }) //Mount the vue instance to index.html => #app app.mount('#app')

Used in root component App.vue

<template>
<nut-button type="primary">主要按钮</nut-button>
</template>

6. Common mistakes

The page appears blank or the page has no changes. Solutions:

When there is an error in the code, it will be prompted when running yarn dev.
yarn dev is unstable for hot loading. Press Ctrl+c on the command line to interrupt and restart yarn dev.