1.先创建vue项目,我准备把项目放在e盘下:E:\VueElement-ui
命令行进入这个目录:cd E:\VueElement-ui
![](https://img.haomeiwen.com/i4336371/0610c06ec8ccecdd.png)
创建一个基于 webpack 模板的新项目
(1)vue init webpack register(项目名)
![](https://img.haomeiwen.com/i4336371/f9b9f8807122f555.png)
(2)需要yes按Enter健就可以了,不需要输入n,然后按Enter健。
![](https://img.haomeiwen.com/i4336371/aa99b3c30e61e9df.png)
(3)创建完成:在目录中可看到
![](https://img.haomeiwen.com/i4336371/05d3cc539ba8a0e7.png)
(4)运行:命令行进入到刚创建好的目录:cd register
![](https://img.haomeiwen.com/i4336371/001f93ba377ec5e7.png)
(5)运行:npm run dev
![](https://img.haomeiwen.com/i4336371/933938afffd42efa.png)
(6)成功:在浏览器输入:http://localhost:8080/
![](https://img.haomeiwen.com/i4336371/4aebbe16adb8895a.png)
出现这个界面说明vue项目创建成功:
![](https://img.haomeiwen.com/i4336371/4ddd6066f9dca7be.png)
现在vue引入Vant
1.打开cmd,进入到当前刚创建的vue项目目录
![](https://img.haomeiwen.com/i4336371/cdaa859aab94b1f2.png)
2.在当前目录中运行:
npm i vant -S:这是简写形式。
npm install vant --save:这是完整写法。
![](https://img.haomeiwen.com/i4336371/062ae7e4f3b0a906.png)
3.接下来我们还需要安装一个插件,方便我们之后优雅的使用vant,在控制台输入npm i babel-plugin-import -D 或者npm install babel-plugin-import --save-dev
![](https://img.haomeiwen.com/i4336371/06741bab7dfe3f84.png)
4.接下来我们去.babelrc中配置一下
.babelrc代码:
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime", ["import",{"libraryName":"vant","style":true}]],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
}
}
}
引入组件
在main.js里导入所有组件:
importVantfrom'vant'
import'vant/lib/vant-css/index.css'
Vue.use(Vant);
接下来我们就可以在我们的页里面大摇大摆地使用Vant了。我们可以做个测试,比如我们在HelloWorld.vue里添加一下button
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="danger">危险按钮</van-button>
![](https://img.haomeiwen.com/i4336371/204f7b21c6dc2c21.png)
网友评论