vue3 造轮子

967 阅读1分钟

构建工具vite

官网文档
创建项目命令,二选一,执行后会有后续命令提示

npm init vite-app <project-name>
yarn create vite-app <project-name>

以上命令等价于先全局安装create-vite-app然后接ç命令

初体验

npm run dev

目录结构

目录结构 index现在不再pulic中,而是暴露出来,但其它方面并无太大变化

template

template template现在支持多个标签,vue2我们总得写个div把包起来吧

new Vue / createApp

旧的api接受构造选项
new Vue(options)
新的api接受组件
createApp(component)

setup

vueRouter

npm info vue-router versions//查看版本号
选择vue-router4以后的版本

使用

//引入
import {createWebHashHistory, createRouter} from 'vue-router'
//配置路由表
const history = createWebHashHistory()
const router = createRouter({
    history,
    routes: [
        {path: '/', component: pageOne},
        {path: '/home', component: HelloWorld}
    ]
})

//使用router
const app = createApp(App)
app.use(router)
app.mount('#app')
//组件中使用配置router-view展示/router-link配置切换

。。。未完待续