1.先创建vue项目,我准备把项目放在e盘下:E:\VueElement-ui
命令行进入这个目录:cd E:\VueElement-ui

创建一个基于 webpack 模板的新项目
(1)vue init webpack register(项目名)

(2)需要yes按Enter健就可以了,不需要输入n,然后按Enter健。

(3)创建完成:在目录中可看到

(4)运行:命令行进入到刚创建好的目录:cd register

(5)运行:npm run dev

(6)成功:在浏览器输入:http://localhost:8080/

出现这个界面说明vue项目创建成功:

现在vue引入Vant
1.打开cmd,进入到当前刚创建的vue项目目录

2.在当前目录中运行:
npm i vant -S:这是简写形式。
npm install vant --save:这是完整写法。

3.接下来我们还需要安装一个插件,方便我们之后优雅的使用vant,在控制台输入npm i babel-plugin-import -D 或者npm install babel-plugin-import --save-dev

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>

网友评论