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开发环境搭建