学习自：B站up主开课吧官方号

快速开始

cdn

1	<script src="https://unpkg.com/vue@3.2.22/dist/vue.global.js"></script>

vue-cli

升级vue-cli

1	npm i -g @vue/cli@next

Vite

使用 Vite 快速构建 Vue 项目。

使用npm或yarn构建项目：

1 2 3 4 5 6 7 8 9

# npm 6.x $ npm init vite@latest <project-name> --template vue # npm 7+，需要加上额外的双短横线 $ npm init vite@latest <project-name> -- --template vue $ cd <project-name> $ npm install $ npm run dev

vite官方文档：https://cn.vitejs.dev/guide/

案例

创建项目vue3-demo

1 2 3 4 5 6 7 8 9 10

D:\workspace\Git>npm init vite@latest vue3-demo --template vue npx: installed 6 in 1.138s Scaffolding project in D:\workspace\Git\vue3-demo... Done. Now run: cd vue3-demo npm install npm run dev

根据提示，执行 cd vue3-demo、npm install、npm run dev命令，可在http://localhost:3000/查看新建的项目。

vue3.x项目结构如下：

Vant

Vant – 移动端 Vue 组件库。

npm安装：

1 2	# Vue 3 项目，安装 Vant 3 npm i vant@3

按需引入

在 Vite 项目中按需引入组件。

对于 vite 项目，可以使用 vite-plugin-style-import 实现按需引入, 原理和 babel-plugin-import 类似。Vant 也支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

# 安装插件 npm i vite-plugin-style-import -D // vite.config.js import vue from '@vitejs/plugin-vue'; import styleImport from 'vite-plugin-style-import'; export default { plugins: [ vue(), styleImport({ libs: [ { libraryName: 'vant', esModule: true, resolveStyle: (name) => `vant/es/${name}/style`, }, ], }), ], };

全局注册

引入组件，Button 按钮。main.js中全局注册组件，将createApp与mount拆开，使用use引入组件。修改如下：

1 2 3 4 5 6 7 8 9 10 11

import { createApp } from 'vue' import App from './App.vue' //按需引入vant组件 import { Button } from 'vant' const app = createApp(App); app.use(Button);//使用vant按钮组件 app.mount('#app');//挂载vue

通过以上方式来全局注册组件，更多注册方式请参考组件注册。

使用

在.vue文件中直接使用即可。（vant组件，带有van-前缀）

1 2 3 4

<template> <h1>{{ msg }}</h1> <van-button type="primary">主要按钮</van-button> </template>

更多组件，见官方文档