VUE练习1 - 添加页面

1 Vue 的目录结构

src/         主开发目录，要开发的客户端代码文件（单文件组件，样式、工具函数等等）全部在这个目录下
static/      静态资源目录，项目中的静态资源(css，js，图片等文件)放在这个文件夹
dist/        项目打包发布文件夹，目前没有这个文件夹，最后要上线单文件项目文件都在这个文件夹中	
		         后面使用npm build 打包项目，让项目中的vue组件经过编译变成js 代码以后,dist就出现了

node_modules/     node的包目录，项目运行的依赖包存储目录，
                  package.json和package-lock.json文件中会自动记录了这个目录下所有的包以及包的版本信息，
                  如果node_modules没有，但是有package.json，则可以在终端下，通过npm install进行恢复。

config/      配置目录，是环境配置目录与项目无关。
build/       项目打包时依赖的目录
src/router/  路由，是我们创建项目的时候，如果选择安装vue-router，就自动会生成这个目录。
src/assets/  静态资源存储目录，与static目录作用类似。
src/components/  组件存储目录，就是浏览器中用户看到的页面的一部分内容。
src/views/       组件存储目录，就是浏览器中用户看到的页面内容，views往往会加载并包含components中的组件进来

2 执行流程图

graph TD
A(index.html 全局唯一入口)-->B(main.js VUE项目初始化入口)
B-->C(App.vue 根组件/路由)
C-->D1(首页页面组件)
C-->D2(登录页面组件)
C-->D3(商品页面组件)
D1-->E1(头部子组件)
D2-->E1
D3-->E1
D2-->E2(脚部子组件)
D1-->E2
D3-->E2
F(router/index.js 配置路由)-->C

3 代码部分

src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

src/App.vue

<template>
	<nav>
		<router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> |
    <router-link to="/showcenter">展示中心</router-link>
  </nav> 
  <router-view/>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

router/index.js，代码：

import { createRouter, createWebHistory } from 'vue-router'
import ShowCenter from '../views/ShowCenter.vue'

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

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

新增 ：views/ShowCenter.vue

<template>
  <div class="showcenter">
    <h1>Show center</h1>
  </div>
</template>

<script>

export default {
  name: 'ShowCenter',
}
</script>