vue3.0+vite+ts項目搭建--基礎配置(二)

集成vue-router

使用yarn

yarn add vue-router@next --save

安裝完成之后在src目錄下創建文件夾router/index.ts，創建完成之后需要在Vue-Router中對Vue-Router進行初始化配置。我們暫時把初始化的工作擱置一下，先需要創建pages文件夾，把需要展示的頁面創建完成。

創建完成之后，接下來就是完善router/index.ts中文件的初始化工作了：

import { createRouter, createWebHashHistory } from "vue-router";

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: "/home",
      name: "Home",
      alias: "/",
      component: () => import("../pages/Home.vue")
    },
    {
      path: "/about",
      name: "About",
      component: () => import("../pages/About.vue")
    }
  ]
})

export default router;

接下來在main.ts文件中集成Vue-Router：

import { createApp } from 'vue';
import App from './App.vue';

import router from "./router";

const app = createApp(App);
app.use(router);
app.mount('#app');

測試一下，這里修改一下App.vue的代碼，測試一下我們的路由是否已經可以正常使用了。

<template>
  <router-link to="/home">Home</router-link>
  <router-link to="/about">About</router-link>
  <router-view></router-view>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'App'
})
</script>

接下來啟動服務就可以看到所配置的頁面了，說明配置的路由已經生效了。

集成Vuex

使用 Yarn

yarn add vuex@next --save

安裝完成之后，首先添加store/index.ts來初始化Vuex。需要注意的是，如下示例使用了Vuex命名空間。可能在實際項目中使用命名空間相對來說還是比較普遍的，避免進行狀態管理的時候導致變量污染。

 

import { createStore } from "vuex";

const store = createStore({
  modules: {
    home: {
      namespaced: true,
      state: {
        count: 1
      },
      mutations: {
        add(state){
          state.count++;
        }
      }
    }
  }
})

export default store;

集成到Vue中：

import { createApp } from 'vue';
import App from './App.vue';

import router from "./router";
import store from "./store";

const app = createApp(App);
app.use(router);
app.use(store);
app.mount('#app');

現在Vuex就已經被集成到Vue中了為了保證集成的Vuex是有效地，那么需要對此進行測試：

pages/Home.vue

<template>
  <h1>Home</h1>
  <h2>{{count}}</h2>
  <button @click="handleClick">click</button>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';
import { useStore } from 'vuex';

export default defineComponent({
  setup () {
    const store = useStore();
    const count = computed(() => store.state.home.count);
    const handleClick = () => {
      store.commit('home/add');
    };
    return {
      handleClick,
      count
    };
  }
})
</script>

當點擊按鈕的時候，就可以發現count值也隨着點擊每次遞增，那么store是可以正常使用.

引入Vant框架

這邊使用的是vant3.0框架

引入按需加載插件

yarn add vant@next -S

yarn add vite-plugin-style-import -D

配置按需加載

vite.config.ts中配置

import styleImport from 'vite-plugin-style-import'
plugins: [
    vue(),
    styleImport({
      libs: [{
        libraryName: 'vant',
        esModule: true,
        resolveStyle: (name) => {
          return `vant/es/${name}/style/css`;
        },
      }]
    })
  ]

main.ts中配置

import Vant from 'vant'
import 'vant/lib/index.css'

const app = createApp(App)
app.use(Vant)
app.mount('#app')

按需加載有待完善,目前是配置CDN加載

vite.config.ts中配置

　　　　　{
          name:'vue',
          var:'Vue',
          path:'https://cdn.jsdelivr.net/npm/vue@next'
        },
        {
          name:'vant',
          var:'vant',
          css: 'https://cdn.jsdelivr.net/npm/vant@next/lib/index.css',
          path:'https://cdn.jsdelivr.net/npm/vant@next/lib/vant.min.js'
        }

main.ts中正常引用

import Vant from 'vant'
app.use(Vant)

CDN配置

yarn add vite-plugin-cdn-import -D

vite.config.ts配置示例文件如下

import importToCDN, { autoComplete } from 'vite-plugin-cdn-import'
plugins: [
    vue(),
    importToCDN({
      modules: [
        autoComplete('lodash'),
        {
          name:'ant-design-vue',
          var:'antd',
          path:'https://cdn.jsdelivr.net/npm/ant-design-vue@2.2.0-beta.6/dist/antd.js',
          css:'https://cdn.jsdelivr.net/npm/ant-design-vue@2.2.0-beta.6/dist/antd.min.css'
        }
      ]
    })
  ]

自動完成(autoComplete)支持的模塊如下:

"react" | "react-dom" | "react-router-dom" | 
"antd" | "ahooks" | "@ant-design/charts" | 
"vue" | "vue2" | "@vueuse/shared" | 
"@vueuse/core" | "moment" | 
"eventemitter3" | "file-saver" | 
"browser-md5-file" | "xlsx | "crypto-js" |
"axios" | "lodash" | "localforage"

 分包配置

在vite.config.ts的build中做如下配置

rollupOptions: {
      treeshake: false,
      output: {
        manualChunks (id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString()
          }
        }
      }
    }

 

參考:Vite開發環境搭建