一

1、在node.js下载

链接

https://nodejs.cn/

选择18.16.1 文档

2、打开cmd

3、安装淘宝镜像

使用淘宝镜像的命令安装：

npm install -g cnpm --registry=https://registry.npmmirror.com

4、安装脚手架

cnpm install -g @Vue/cli

5、建立项目

vue create 项目名字 选默认选项  node -v 查看node版本号 npm -v 查看npm版本号 vue -V  查看脚手架版本号

二

打开建立的文件夹

1、在vue应用-终端-新建终端

复制以下命令

npm i vant

2、搜索vant4（可忽略）

3、在App.vue复制以下代码 （详细可见三）点击左栏（src）

<link

  rel="stylesheet"

  href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css"

/>

4、在main.js更改代码 （详细可见三）

import { Button } from 'vant';

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

5、在HelloWord.vue操作 （详细可见三）点击左栏（src）里的（compoents)

将<template>

</template>里面的<div>删除复制以下代码

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

<van-button type="success">成功按钮</van-button>

<van-button type="default">默认按钮</van-button>

<van-button type="warning">警告按钮</van-button>

<van-button type="danger">危险按钮</van-button>

6、在终端复制以下命令。

npm run serve

三

App.vue

1 <template>

2  <img alt="Vue logo" src="./assets/logo.png">

3  <HelloWorld msg="Welcome to Your Vue.js App"/>

4  <link

5  rel="stylesheet"

6  href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css"

7 />

8 </template>

main.js

import { createApp } from 'vue'

import App from './App.vue'

import { Button } from 'vant';

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

HelloWord.vue

<template>

 <van-button type="default">默认按钮</van-button>

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

<van-button type="info">信息按钮</van-button>

<van-button type="warning">警告按钮</van-button>

<van-button type="danger">危险按钮</van-button>

</template>