Vue3.2已官宣,使用官配Vite擼一個

話不多說,先來一個小提醒:需要將node升級到較高版本(建議12+),否則你可能會遇到一些問題。官方推薦使用vscode編輯器和Volar拓展,使用時記得先把Vetur禁用掉,不然還是會有一堆報紅提示。

  • 創建項目
    npm init vite hello-vue3 -- -- template vue
    通過方向鍵選擇所要創建項目的框架(vue、react等等)。
    cd進hello-vue3,啓動項目npm run dev,創建好的項目結構如下圖:

  • 生成的HelloWorld組件的JavaScript:

可以看到:默認配置了ts沒有export defaultsetup放置在script標籤內,引入的組件不需要手動註冊,定義的屬性和方法也不需要return出去。setup語法糖向模板公開了所有的頂級綁定;


殼子搭好了,把樣式搞搞:

  • 使用scss
    安裝:cnpm install sass --save
    在assets下創建scss文件public.scss,並添加配置:

    這樣就可以在全局下正常使用scss了。注意尾巴的分號,不要漏掉哦!

  • 使用路由:vue-router@4

注意:vue3是要搭配路由4的哦!

安裝:cnpm install vue-router@4 --save
路由的創建方式和vue2略有區別,vue2使用new Router()的方式,而vue3使用的是createRouter:

import { createRouter, createWebHistory, createWebHashHistory} from 'vue-router'
const routes = [
 { path: '/', component: Home },
 { path: '/about', component: About },
]
const router = createRouter({
 history: createWebHashHistory(),//或createWebHistory
 routes: routes
})

export default router;

在app.vue組件中放置:<router-view></router-view>

使用過程中組件無法顯示,提示如下:

解釋:組件提供模板選項,但是在Vue的這個構建中不支持運行時編譯,配置你的bundler別名 vue: vue/dist/vue.esm-bundler.js。

解決方法: 在根目錄下的配置文件vite.config.ts中添加alias別名設置:

alias:{
    'vue': 'vue/dist/vue.esm-bundler.js'
  }

添加完成後終端上會有如下提示:

但是組件可以正常顯示,路由也可以使用。 將alias放在resolve裏就不會報這個提示了。即:

resolve:{
    alias: {
      'vue': 'vue/dist/vue.esm-bundler.js'
    }
  }

此時完整的配置文件如下:


  • this問題
    在使用路由跳轉的過程中遇到了this的問題:vue3組件中的this和vue2已經不一樣了,詳情可以到官網看。這裏說下解決方法:
import { getCurrentInstance } from 'vue'
const {proxy} = (getCurrentInstance() as any) //如果是js可以直接const {proxy} = getCurrentInstance();
const _this = proxy;//可在控制檯打印_this,會發現和vue2中的this一樣

  • 全局變量
    最後說一下全局變量,這個也是日常開發中最常使用的:
    設置:app.config.globalProperties.name = "全局變量";
    在組件中使用:
import {getCurrentInstance} from 'vue'
const {proxy} = (getCurrentInstance() as any)
console.log(proxy.name);

到這裏,基本的東西都有啦,後續再更新!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章