vue3+vant3初步搭建项目（一）

vue3+vant3

准备vue3环境

• 安装vue3
  使用npm install vue@next命令安装vue3版本

可以安装vue-clinpm install -g @vue/cli，通过脚手架来选择构建vue3项目：选择：

Default (Vue 3 Preview) ([Vue 3] babel, eslint)

也可以使用vite快速构建一个vue3项目，具体步骤和其他内容官网上都有。

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

各种安装并启动完之后打开main.js文件，创建vue实例变成了createApp，此时已经构建了一个vue3项目。

import {
    createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

使用vite构建的项目首页欢迎语是：Hello Vue 3.0 + Vite
使用cli构建的首页欢迎语是：Welcome to Your Vue.js App

安装vant3

具体的其他说明官网上都有

npm i vant@next -S

安装完毕后我们先全局引入来看一下效果，修改main.js为以下代码：

import {
    createApp } from 'vue'
import App from './App.vue'
import Vant from 'vant';
import 'vant/lib/index.css';

const app = createApp(App);
app.use(Vant);
app.mount('#app')

这写起来有点像写nodejs：const app = require('express')();app.use(()=>{});app.listen();
然后我们复制一个vant按钮到HelloWorld.vue中：<van-button icon="plus" type="primary">按钮</van-button>，此时页面上增加了一个蓝色按钮。引入vant成功。

平常我们开发的时候用不了那么多vant组件，所以需要配置一下按需引用。按照官网步骤来：

npm i babel-plugin-import