Vue3已經(jīng)發(fā)布一段時(shí)間了型豁，對比原來的版本，性能有較大的提升尚蝌，對Ts的支持更加友好迎变，用法和原來的差不多，兼容Vue2語法飘言。今天對Vue3進(jìn)行初探衣形，用到了Vue的幾個(gè)核心組件。
不廢話直接開干姿鸿，用命令行創(chuàng)建Deno谆吴。
我用的終端管理軟件是 ConEmu一款強(qiáng)大的工具，
開始
-
在桌面創(chuàng)立新的項(xiàng)目文件夾 并用命令行進(jìn)入該文件苛预。
image.png - 在該文件目錄下安裝構(gòu)建工具
你還可以通過附加的命令行選項(xiàng)直接指定項(xiàng)目名稱和你想要使用的模板句狼。例如，要構(gòu)建一個(gè) Vite + Vue 項(xiàng)目热某，運(yùn)行: 本文使用的就是指定版本腻菇。
# 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
-- 創(chuàng)建項(xiàng)目目錄 --
執(zhí)行 命令 cva xxx項(xiàng)目名 或者create-vite-app xxx項(xiàng)目名
xxx項(xiàng)目名 隨意起
image.png
- 初始化項(xiàng)目
進(jìn)入項(xiàng)目
cd xi-ui-1
初始化 開始yarn
image.png - 項(xiàng)目初期 跑起來
yarn dev
image.png
本地服務(wù)器跑起來了命令行執(zhí)行如下命令 ，效果如下：
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:[
//當(dāng)訪問根目錄的時(shí)候 渲染的是 laowang這個(gè)組件 下面的一樣的意思
{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>導(dǎo)航欄 |
<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
當(dāng)點(diǎn)擊laowang 或者laowang2的時(shí)候 下面的組件也會(huì)跳轉(zhuǎn)
