一、 安装 Vue Cli
npm install -g @vue/cli
二、创建一个项目,hello-world为你定义的项目名称
vue create hello-world
三、安装vant依赖
npm i vant@next -S
四、按需引用
npm i babel-plugin-import -D
五、项目根目录下babel.config.js文件下配置
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
}
六、配置文件,在src下新建config目录 新建vant.config.js文件,可以将需要使用到的vant组件在这里引入:
import { Button, List, Cell, CellGroup } from 'vant';
export function vant(app) {
app.use(Button);
app.use(List)
app.use(Cell);
app.use(CellGroup);
}
七、修改main.js文件:
import { createApp } from 'vue'
import App from './App.vue'
import { vant } from '@/config/vant.config.js'
const app = createApp(App);
vant(app)
app.mount('#app')
八、导入组件
<van-button icon="plus" type="primary">按钮</van-button>
成功显示,一箭三联,感谢!