Vue3已经发布一段时间了，对比原来的版本，性能有较大的提升，对Ts的支持更加友好，用法和原来的差不多，兼容Vue2语法。今天对Vue3进行初探，用到了Vue的几个核心组件。
不废话直接开干，用命令行创建Deno。
我用的终端管理软件是 ConEmu一款强大的工具，
开始
-
在桌面创立新的项目文件夹 并用命令行进入该文件。
image.png
- 在该文件目录下安装构建工具
你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行: 本文使用的就是指定版本。
# npm 6.x
npm init vite@latest my-vue-app --template vue
# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue
# yarn
yarn create vite my-vue-app --template vue
image.png
-- 创建项目目录 --
执行 命令 cva xxx项目名 或者create-vite-app xxx项目名
xxx项目名 随意起
image.png
- 初始化项目
进入项目
cd xi-ui-1
初始化 开始yarn
image.png
- 项目初期 跑起来
yarn dev
image.png
本地服务器跑起来了命令行执行如下命令 ，效果如下：
yarn dev
image.png
image.png
image.png
-
开始引入Vue-router 路由器 用于页面切换
使用命令行查看vue-router的所有版本
npm info vue-router versions
image.png
-- 安装vue-router 还是采用指定版本号的方式
yarn add vue-router@4.0.0-beta.3
image.png
image.png
重头戏来了 开始写代码
image.png
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
//添加以下代码 引入路由
import { createWebHashHistory, createRouter } from 'vue-router'
import laowang from './components/laowang.vue'
import laowang2 from './components/laowang2.vue'
const history = createWebHashHistory()
const router = createRouter({
history,
routes:[
//当访问根目录的时候 渲染的是 laowang这个组件 下面的一样的意思
{path:'/',component:laowang},
{path:'/xxx',component:laowang2}
]
})
const app = createApp(App)
app.use(router)
app.mount('#app')
- 在 App.vue 中 添加 <router-view> 和 <router-link >
<template>
<div>导航栏 |
<router-link to="/">laowang</router-link> |
<router-link to="/xxx">laowang2</router-link>
</div>
<hr>
<router-view/>
</template>
<script>
export default {
name: 'App',
}
</script>
最终效果如下 :
image.png
当点击laowang 或者laowang2的时候 下面的组件也会跳转
网友评论