如何新建一个vue+vant移动端项目

默认已经安装好了node和vue cli。

vant官方文档:https://youzan.github.io/vant/#/zh-CN/home

npm install -g @vue/cli

1.新建项目（安装速度慢，可使用taobao的仓库加速）

#创建你的项目 vue init webpack 你的项目名 cd 你的项目名 #安装依赖 npm install #运行 npm run dev

依次指定项目名称、项目描述、作者等信息

2.vant的安装和引入

Ctrl+C后输入Y,可以停止命令行，然后输入

npm i vant -S

安装自动按需引入组件

npm i babel-plugin-import -D

修改.babelrc文件

['import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant']

main.js引入需要组件

import { Button } from 'vant'; Vue.use(Button);

在HelloWorld.vue修改内容如下

<van-button type="primary">主要按钮</van-button> <van-button type="info">信息按钮</van-button> <van-button type="default">默认按钮</van-button> <van-button type="warning">警告按钮</van-button> <van-button type="danger">危险按钮</van-button>

 运行vue，打开浏览器：http://localhost:8080/#/ 按F12(笔记本可能需要按Fn)打开开发者工具，点击图示位置，切换为手机浏览模式