初识vue3

装载vue3

首先我们需要创建vue3 现在由于是要学会一些vue3的基础的用法 和 路由配置 我们就不用vite和别的创建方式 就最简单的方式

myproject就是你的项目名字 你可以改成你想要的任何名字 但是得是英文名

这边vue3 我们选择自定义 路由和ts都帮你配置好了 

这里是空格选择 请一定要注意

而后是选择完毕以后直接回车

后面一直默认 可以一直按回车

请注意如果装的过程 某个环境卡住了 可能是网络问题 你需要查看你的网络 或者 装vue时的镜像是否正确

这就成功了

文件配置的查看

把项目拖拽到vscode里 里面比较有用的几个文件夹

分别是

views:写你的页面(建议创文件夹放例如:主页创建main文件夹下面创界面文件)

components:你的组件 文件

router:路由文件 (vue最重要的文件) 一个就行 用不着再创建

app.vue:相当于你的桌子 你的页面都放在上面 每次切页面都是在vue.app里操作

切页面也就是路由跳转其实比较少 无非就是从登陆到管理页 vue更适合单页面开发 这也是为啥管理系统都拿他来做 设计到一个局部刷新的概念 可以去了解一下

如何开始你的hello word

一开始大部分人启动搞不懂

有两种启动方法

第一种

点击这里

会出来这样一个终端 (你要装包的化 建议管理员启动终端装 很可能权限不够)

npm run serve

输入这样一个代码

这样就是成功了 ctlr+鼠标左键打开链接

而后跳出来这样一个页面 这就成了 现在我们要写自己的东西了

改vue3文件内容

首先App.vue的内容进行修改 这是很重要的 

 

<template>
  <div id="app">
    <router-view/>
  </div>

</template>

<style lang="scss">

</style>

改成这个样子

路由

接下来我们来看看路由文件

请注意打了箭头的

path也就是你的链接路径

component:也就是你的组件 就是你的页面

createWebHistory:可以更改 打包不对的时候可以更改 链接时带个#号不细讲

其中第一个箭头就是你的组件页面 

你观察到有两个导入页面的方式不一样 第一个这样写

import HomeView from '../views/HomeView.vue'

第二个这样写

component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')

 这两个都是导入页面 但是第二个动态导入 更高效 对于首页的导入效果很好 加载的更快

实例

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

你可以看到第一个的路径就一个"/"

现在我们打开页面看一眼

你可以看到这里的箭头 指向的后缀啥也没有 

接下来我们看path时"/about"的

你可以看到链接后缀为about时 是另外一个页面 

这时我们做个操作 改一下路由 

你可以看到我改了path

这时我们再输入 就啥也没有了

 但是我们改成home试试

又有了

我们再试试 

都改成了 

如果你想加页面的话也是同理

无非创建好页面

但是页面一定要有这几个元素

<template>
 <div>
 <p></p>
 </div>
</template>

而后是页面名字一定是两个单词组成(xxPage.vue  xx你取什么都行 只能是英文)

路由照葫芦画瓢就行

 {
    path: '/你想取得路径',
    name: '名字',
    component: () => import('你的文件路径')
  }
//往下接着cv就行

结束

这样我们就初步认识到vue3的组成 接下来就可以愉快的写页面代码啦~