vue3-造轮子【0】-初始化

准备工作

搭建官网

——————————————————

准备工作

1.vue2和vue3的区别

90%写法完全一致， 除以下几点

• vue3的template支持多个根标签，vue2只支持一个
• vue3的主函数是createApp(),而vue2是new Vue()
• createApp(组件)，new Vue({template,render})

image.png image.png

2.当把main.js文件改为main.ts文件后，以.vue后缀结尾的文件都会报错， 这时需要创建src/shim-vue.d.ts

declare module '*.vue' {
    import { ComponentOptions } from 'vue'
    const componentOptions: ComponentOptions
    export default componentOptions
}

5.windows开发环境搭建

1. 安装 Node.js 稳定版
   进入 https://nodejs.org/zh-cn/ 点击左边的下载按钮即可，下载后将 Node.js 安装到 D:\node 或者 C:\node 然后一路点击「下一步」即可安装
2. 安装 npm
   不需要安装，Node.js 自带 npm
3. npm 下载加速
   在命令行中运行 npm config set registry https://registry.npm.taobao.org 回车即可
4. 安装 yarn
   进入 https://classic.yarnpkg.com/zh-Hans/ 往下滚，点击「下载安装程序」，下载后将 yarn 安装到 D:\yarn 或者 C:\yarn 然后一路点击「下一步」即可安装
5. 安装 VSCode
   进入 https://code.visualstudio.com/ 点击 Download 按钮，下载后安装在任意位置即可。

搭建官网

1.使用vite搭建官网

全局安装create-vite-app
yarn global add create-vite-app@1.18.0
或者
npm i -g create-vite-app@1.18.0

image.png

2.vue-router4与vue3进行搭配的路由器， 用于页面的切换

3.查看所有的版本号

npm info vue-router versions

4.初始化vue-router

• 新建history对象
• 新建router对象
• app.use(router)
• 添加<router-view>
• 添加<router-link>

image.png

5.自动引入模块的插件 auto import

const xxx = ref按tab 就会自动引入ref

6.provide和Inject的使用

设置

image.png

获取

image.png

7.判断页面宽度来决定初始值

image.png

8.当路由切换时，改变变量， 可以先引入路由，然后调用路由守卫钩子

image.png