1、安装node.js
过程：略
2、安装VUE脚手脚V3版本
npm install -g @vue/cli
3、创建项目
vue create hello-world
4、进入项目目录
cd hello-world
5、安装vant
npm i vant -S
6、安装 babel-plugin-import 插件
npm i babel-plugin-import -D
babel-plugin-import是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式
7、配置 babel-plugin-import 插件
(1)：babel版本大于等于7时：
- 需修改根目录下的：
babel.config.js文件进行配置，主要是plugins节点，加入到你的配置中即可。
module.exports = {
presets: [
'@vue/app'
],
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};
(2)：babel版本小于7时；
- 需要修改或创建根目录下的：
.babelrc文件，进行配置，主要是plugins节点，加入到你的配置中即可。配置上和（1）节中一至，只是配置的文件不同。
8、引入vant组件
- 修改
src目录下的main.js文件，引入vant组件，以供其它页面(组件/模块)使用。
import Vue from 'vue'
import App from './App.vue'
import { Button } from 'vant';
Vue.use(Button);
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
9、代码样例
-
/src/App.vue：
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<!--<HelloWorld msg="Welcome to Your Vue.js App"/>-->
<Test/>
</div>
</template>
<script>
import Test from './components/Test.vue'
export default {
name: 'app',
components: {
Test
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
-
/src/components/Test.vue：
<template>
<van-button type="primary">主要按钮</van-button>
</template>
<script>
export default {
}
</script>
10、运行项目，查看效果
npm run serve
