Vue手脚架使用

---

1.创建项目

vue creat 项目名字

# 运行项目
npm run serve 

2.文件夹的作用

3.组件之间的使用

（1）基本逻辑

vue项目通过入口main.js进入，并挂载到App.vue中，在该组件中，通过 <router-view />加载路由，在路由加载之前也可以引入相关的组件

<template>
  <div id="app">
    // 可以引入其他的组件，也可以什么都不写，以路由的根路径为主页面
    <router-view />
  </div>
</template>

<script>

</script>


<style>

</style>

（2）组件的使用

• 使用组件之前肯定要对组件进行暴露，注意暴露的名字是什么，在引用组件的时候要写什么
• 在一个组件中使用其他组件，要进行组件的注册，如：

<script>

import Nav from './components/nav/Nav.vue' // 引入组件

export default {
  components: { //多个组件之间用逗号隔开
    Nav
  }
}
</script>

（3）父子路由的问题

• 首先，在使用父子路由的时候，注意子路由的path 开头不要加 / ！！！！！
• 既然使用了组件化开发，那么就认为父子路由就是组件之间的切换，那么切换的时候要注意到：父路由的内容在切换子路由时通常会保留，因此，就会产生一个问题：父组件的内容在切换到子路由的时候保留了（我们既然切换组件，基本是需要使用新的组件，而不显示当前组件），这样说可能比较难理解，通过登录，注册页面进行说明

<!--

   这个登录页面的路由为 /login ，子路由是注册页面 /login/register ，那么我们点击注册之后注意到，
登录页面的内容仍然存在！！！
	那么，通过这个方法肯定是不可以的，考虑：
		既然父路径的内容不会因切换子路由而丢失。
		那么，登录、注册页面可看做一个组件，这样子通过一个空的、只有路由显示的父组件就可以解该问题

 -->
  <div class="login-box">
    <div class="content">
      <h2>登录</h2>
      <div>
        <input type="text" placeholder="请输入用户名">
      </div>
      <div>
        <input type="password" placeholder="请输入密码">
      </div>
      <div>
        <input type="submit" value="登录">
      </div>
    </div>
    <a href="#" class="btns">忘记密码</a>
    <router-link to="/login/register" class="btns register">注册</router-link>
    <router-view />
  </div>

<!-- 
	LoginIndex.vue
	父组件，通过引用 登录、注册的组件即可达到想要效果 （我认为。且目前使用没发现有什么问题）
	在设置路由的时候，将本页面的路径和其中一个子路由的路径一样，可以实现重定向的效果（具体，见下面的 路由设置 ）
-->

<template>
  <div id="login-index">

    <router-view />
  </div>
</template>

<script>

</script>

<style>

</style>

// 路由设置
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/LoginIndex.vue'),
    children: [
      {
        path: 'register',
        name: 'Register',
        component: Register
      }
      , {
        path: '/login',
        name: 'login',
        component: () => import('../components/login/Login.vue'),
      }
    ]
  }

• 上面的方法也可由js通过监听路由的改变实现（可以自行查找相关讲解）