vue3.0+vite+ts项目搭建--基础配置(二)
阅读原文时间:2022年04月07日阅读:1

集成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的代码,测试一下我们的路由是否已经可以正常使用了。

接下来启动服务就可以看到所配置的页面了,说明配置的路由已经生效了。

集成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

当点击按钮的时候,就可以发现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开发环境搭建

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器