美文网首页前端
Vue和Vant使用

Vue和Vant使用

作者: Kemmy_m | 来源:发表于2019-08-28 14:12 被阅读0次

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>

效果就出来了

相关文章

网友评论

    本文标题:Vue和Vant使用

    本文链接:https://www.haomeiwen.com/subject/vzvpectx.html