vite搭建vue專案-整合別名@、router、vuex、scss就是這樣簡單

南風晚來晚相識發表於2022-02-03
ViteVueCSS

為什麼要使用vite

當我們開始構建越來越大型的應用時，
需要處理的 JavaScript 程式碼量也呈指數級增長。
包含數千個模組的大型專案相當普遍。
這個時候我們會遇見效能瓶頸
使用 JavaScript 開發的工具通常需要很長時間（甚至是幾分鐘！）才能啟動開發伺服器，
檔案修改後的效果也需要幾秒鐘才能在瀏覽器中反映出來。
如此迴圈往復，遲鈍的反饋會極大地影響開發者的開發效率和幸福感。
Vite就是為了就解決這個問題

什麼是vite

法語Vite（輕量，輕快）vite 是一個基於單檔案元件的非打包開發伺服器，
它做到了本地快速開發啟動、實現按需編譯、不再等待整個應用編譯完成的功能作用。

vite的優勢

1==>速度快: Vite使用esbuild 預構建依賴(Esbuild 使用 Go 編寫), 
比 JavaScript 編寫的預構建依賴快 10-100 倍

2==>按需提供原始碼: Vite只需要在瀏覽器請求原始碼時,進行轉換並按需提供原始碼。
根據情景動態匯入程式碼，即只在當前螢幕上實際使用時才會被處理。

使用vite搭建專案

1. yarn create vite [建立專案]
2. 輸入專案名[vitevue3ts]
3. 選擇使用的js框架vue
4. 使用使用ts 選擇vue-ts
5. cd vitevue3ts
6. npm install
7. npm run dev

自動開啟瀏覽器，將vite.config.ts檔案配置如下

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],

  // 自動開啟瀏覽器
  server: {
    host: '0.0.0.0', //通過ip的形式訪問
    port: 8080, //埠號
    open:true, //自動開啟瀏覽器

    //配置代理，但是我步推薦前端去代理，
    //因為打包後便不會在有代理，上線後是個坑
    proxy: {
      '/api': {
          target: 'http://API閘道器所在域名',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
      },
    }
  }
})

vite配置別名,類似webpack的@

第一步: npm install @types/node --save-dev
cnpm install @types/node --save-dev [僅在開發環境中使用]
或者
yarn add package-name
yarn add package-name --dev [僅在開發環境中使用]


第2步:配置vite.config.ts檔案 如下:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 配置別名需要的路徑模組
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  // 配置別名
  resolve: {
    alias: [
      {
        find: '@', //指向的是src目錄
        replacement:resolve(__dirname,'src')
      }
    ]
  },
})

第3步:驗證別名是否成功
我們可以將  import HelloWorld from './components/HelloWorld.vue'
更改為  import HelloWorld from './components/HelloWorld.vue'
經過驗證時ok的，別名設定成功

配置路由

第1步下載:

官網:https://next.router.vuejs.org/installation.html
npm install vue-router@4

第2步:配置

src下建立資料夾，router資料夾，建立index.ts檔案；
程式碼如下：

import { createRouter, RouteRecordRaw, createWebHashHistory } from 'vue-router'
const routes : Array <RouteRecordRaw> = [
    {
        path: '/a',
        name: 'home',
        component:()=>import('../views/teacher/index.vue'),
    }
]

const router = createRouter({
    history: createWebHashHistory(), //雜湊值模式
    routes
})

// 暴露出去
export default router

第3步:在main.ts中註冊

import { createApp } from 'vue'
import App from './App.vue'
// 引入路由
import router from './router/index'
// 使用路由
createApp(App).use(router).mount('#app')

第4步:在app.vue中更改

<template>
  <!-- 放置路由容器 -->
 <router-view></router-view>
</template>
<script setup lang="ts">
</script>

整合vuex

第1步:安裝vuex

安裝vuex: npm install vuex@next --save
或者      yarn add vuex@next --save

第2步:在src下建立store資料夾,store下建立index.ts

import { createStore } from 'vuex'
// 宣告介面
export interface State {
  count: number
}
// 建立store例項
const store = createStore({
    state () {
      return {
        count: 0
      }
    },
    mutations: {
      // 更改count
      changeAddoneCount(state:State) {
          state.count++
      },
      changeTenCount(state:State,valueNum) {
          state.count=valueNum
      },
    }
})
export default store;

第3步:在main.ts中註冊

import { createApp } from 'vue'
import App from './App.vue'
// 引入路由
import router from './router/index'
// 引入vuex
import store from "./store/index"
// 使用路由,vuex
createApp(App).use(router).use(store).mount('#app')

第4步:在頁面上使用

<template>
  <div>
    <div>
      count的初始值{{ store.state.count }}
    </div> 
    <button @click="addHander">每次+1</button>
    <button @click="changeHander">直接更改為10</button>
  </div>
</template>

<script setup lang="ts">
import { useStore} from 'vuex'
let store=useStore()
// 更改vuex中的值，通過commit去觸發vuex中mutations中對應的方法
const addHander=()=>{
  store.commit('changeAddoneCount')
}
const changeHander=()=>{
  store.commit('changeTenCount',10)
}
</script>

ts中使用@號引入

看見這個標題，有的小夥伴會說，剛剛不是已經配置過別名了嘛？
在vite配置別名,類似webpack的@中。這種我們可以引入元件
但是去這樣引入  import store from "@/store/index" 會報錯
我們需要去解決這個問題

第1步: 在tsconfig.json配置如下

在12行下新增==>如下
"baseUrl": ".",
"paths": {
  "@/*":["src/*"]
}

第2步: 用main.ts來驗證是否正確

之前是
import router from './router/index'
import store from "./store/index"
更改為
import router from '@/router/index'
import store from "@/store/index"
這樣沒有報錯了，說明我們的配置成功了

npm run build報錯vue-tsc --noEmit && vite buils

在tsconfig.json配置如下
"exclude": ["node_modules"]  //忽略node_modules下的檔案
"skipLibCheck": true         //忽略所有宣告的ts檔案

專案中全域性使用scss

第1步:安裝
npm install sass --save
npm install sass-loader --save-dev

第2步:vite.config.ts中配置

css: {
  // css前處理器
  preprocessorOptions: {
    scss: {
      charset: false,
      //需要在assets下建立對應的檔案global.scss
      additionalData: '@import "./src/assets/style/global.scss";',
    },
  },
}

第3步:驗證

//global.scss檔案
$main:#ccc;
$c:pink

<template>
  <div class="home">
      <h1 class="h1">全域性使用scss</h1>
  </div>
</template>
<style lang="scss" scoped>
.home{
  height: 40px;
  //使用全域性變數
  background: $main;
  .h1{
    color:$c 
  }
}
</style>

尾聲

如果你覺得我寫的不錯的話，可以給我推薦、打賞、評論!
上一個給我打賞的小夥伴都已經找到女朋友了!
咦!你不信，不信你給我打賞看一下!
保準你追到到喜歡的Ta!
你不會追，哎!難受。

我教你，你可以這樣說:
小生不才，斗膽-問，不知姑娘是否心繫他人。
感情之事，在下不敢兒戲!
如若姑娘早已心繫他人。那在下便不再打擾。
如若有所唐突還望姑娘多加體諒!
若姑娘非我良人，那在下就不庸人自惱。
在下怕越陷越深，還望姑娘儘早告知!話已至此，我便先在此謝過!
拿去不謝!回頭告訴我結果啊!
咦!抓住一個沒有打賞的小夥伴!

相關文章