一

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、建立項(xiàng)目

vue create 項(xiàng)目名字 選默認(rèn)選項(xiàng)? node -v 查看node版本號 npm -v 查看npm版本號 vue -V? 查看腳手架版本號

二

打開建立的文件夾

1、在vue應(yīng)用-終端-新建終端

復(fù)制以下命令

npm i vant

2、搜索vant4（可忽略）

3、在App.vue復(fù)制以下代碼 （詳細(xì)可見三）點(diǎn)擊左欄（src）

<link

? rel="stylesheet"

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

/>

4、在main.js更改代碼 （詳細(xì)可見三）

import { Button } from 'vant';

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

5、在HelloWord.vue操作 （詳細(xì)可見三）點(diǎn)擊左欄（src）里的（compoents)

將<template>

</template>里面的<div>刪除復(fù)制以下代碼

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

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

<van-button type="default">默認(rèn)按鈕</van-button>

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

<van-button type="danger">危險(xiǎn)按鈕</van-button>

6、在終端復(fù)制以下命令。

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">默認(rèn)按鈕</van-button>

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

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

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

<van-button type="danger">危險(xiǎn)按鈕</van-button>

</template>