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通过监听路由的改变实现（可以自行查找相关讲解）