脚手架创建vant Vue项目

vue init toucan/vue-cli-template-vant project-name

project-name是项目名称是自己定义的，注意项目名不能是大写
接下来的过程会出现：

---

image.png

---

Install vue-router? 之前一直按回车键
Install vue-router?选择Y按回车键
之后的选择N按回车键

---

接下来出现了

---

image.png

---

按照它的提示依次输入命令

---

image.png

---

最后输入

nom run dev

运行后浏览器chuxian

---

image.png

---

创建项目成功

---

1.配置router
文档地址：https://router.vuejs.org/zh/

cnpm i vue-router --save-dev

2.配置路由
在src下创建router/index.js和pages/home/index.vue
配置router/index.js

//加载Vue,vue-router
import Vue from 'vue'
import Router from 'vue-router'
//使用router
Vue.use(Router)

import Index from '@/pages/home' // 首页
//配置路由
export default new Router({
    routes:[
        {
            path:'/',
            name:'index',
            component:Index
        }
    ]
})

在main.js里引入router
例子

import Vue from 'vue';
import App from './App.vue';
import router from './router'

new Vue({
  el: '#app',
  router,
  render: h => h(App)
});

在App.vue写上<router-view />
它的意思是你跳转路由的时候它对应的组建就放在<router-view />位置

<template>
  <div id="app">

        <router-view />

  </div>
</template>

<script>

export default {
  components: {
  }
};
</script>

<style>
</style>