标签：npm vue vant 新建 按钮 import 安装
默认已经安装好了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)打开开发者工具，点击图示位置，切换为手机浏览模式
标签：npm,vue,vant,新建,按钮,import,安装 来源： https://www.cnblogs.com/javalinux/p/16296913.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。