準備工作

搭建官網

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

準備工作

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