Vue项目初构之第一个页面创建

我们在view文件夹里面新建一个login页面，为了让项目看起来更清晰，我们按照模块进行分类。

image.png

login.vue文件内我们输入一段文字

  <div class="wrapper">
    login 页面
  </div>
</template>

<script>
export default {
  name: 'Login',
  components: {},
  props: {},
  data () {
    return {
    }
  },
  watch: {},
  computed: {},
  methods: {},
  created () {},
  mounted () {}
}
</script>
<style lang="scss" scoped>
.wrapper{
  font-size: 16px;
}
</style>

我们在index路由里面配置一下。

import VueRouter from 'vue-router'
import Login from '../views/login/Login.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Login',
    component: Login
  }
]

const router = new VueRouter({
  routes
})

export default router

我们把之前新建项目时系统给我们建的 about home 路由删除，配置上login的路由，对应的吧about home路由对应的页面删除。现在view中只留下login页面。

image.png

下面我们运行下项目,页面正常展示。

image.png