准备工作
搭建官网
——————————————————
准备工作
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开发环境搭建
- 安装 Node.js 稳定版
进入 https://nodejs.org/zh-cn/ 点击左边的下载按钮即可，下载后将 Node.js 安装到 D:\node 或者 C:\node 然后一路点击「下一步」即可安装 - 安装 npm
不需要安装，Node.js 自带 npm - npm 下载加速
在命令行中运行npm config set registry https://registry.npm.taobao.org回车即可 - 安装 yarn
进入 https://classic.yarnpkg.com/zh-Hans/ 往下滚，点击「下载安装程序」，下载后将 yarn 安装到 D:\yarn 或者 C:\yarn 然后一路点击「下一步」即可安装 - 安装 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
