vitevue（vitevue3 日历插件）

本篇文章给大家谈谈vitevue，以及vitevue3 日历插件对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、vue3中vite的配置
• 2、vite与vue2
• 3、Vite创建vue项目简单几步
• 4、【笔记】使用Vite搭建Vue3(TypeScript版本)项目
• 5、Vite+Vue3+Vue-Router@4+Pinia 快速起步

vue3中vite的配置

上一节 - 搭建vue3+typescript+vite+yarn项目

在vue2里，我们使用webpack打包工具，一些基本配置我们都是熟悉不能再熟悉，但在vite里，有什么不同呢？

参考链接 - vite 中文文档

vue2里，针对webpack的配置，是基于vue.config.js文件

但在基于vite的vue3里，配置文件是vite.config.js

我构建的是ts版本的vue3项目，那么我的配置文件就是vite.config.ts

而且该文件卜散圆项目创建的时候已经默认生成了

新创建的项目配置文件，仅仅配置型塌vue的支持，如下：

配置反向代理，利用 server配置项

配置项一目了然，跟vue2的vue.config.js的配置大同小异

这里主要说明下，我proxy里的config

config变量来源于全局变量

这需要在根目录下创建两个命名为：.env.development、.env.production的文件

编写相关的变量：

vue2中使用习惯了开箱即用的路径别名，但在vue3的ts项目里，如果直接使用，是会报错的：

这样配置后，引入组件就能正掘颤常被编译了

下一节 - vue3中引入router和vuex

vite与vue2

取一个项目名称，如：v2

选vanilla

打开项目文件夹v2，新建一个 vite.config.js 文件

此时是没有搜行备app.vue的，新建一带裤个src目录，将main.js挪进去，新建一个App.vue

并修改index.html中main.js为src/main.js

运行命令，安装vite-plugin-vue2

运行命令，安装vue

此时世毁的package.json如下：

运行： npm run dev 项目就成功跑起了

Vite创建vue项目简单几步

1、安装 npm init @vitejs/app

2、选州档择框架

3、安装依赖 npm install（npm i）

1、安装： npm i vue-router@next

2、 新建 router-index.ts 文件

[图片上传失败...(image-2fb130-1638707524295)]

3、写入

4、在mian.ts文件中引入

[图片上传失败...(image-53c18a-1638707524295)]

1、安装 npm install --save-dev sass

就这么一句安装就可以使瞎升用了，用vuecli的时候，还要安装sass-loader、node-sass等，但是vite只需要安装sass就可以了

2、测试

[图片上传失败...(image-4725de-1638707524295)]

[图片上传失册神乱败...(image-aa6793-1638707524295)]

3、如果需要全局使用sass变量，在vite.config.js文件中新增

【笔记】使用Vite搭建Vue3(TypeScript版本)项目

使用Vite搭建Vue的TypeScript版本的时候，可以使用 Vite自带的模板预设 —— vue-ts 。

执行命令行 ：

执行命令模核行(安装最新版本)：

router.ts

执行命令行(安装最新版本)：

Vuex 没有为 this.$store 属性提供开箱即用的类型声明。如果你要使用 TypeScript，首先需要声明自定义的 模块补充(module augmentation) 。

为此，需要在项目文件夹中添加一个声明文件来声明 Vue 的自定义类型 ComponentCustomProperties 。

vuex.d.ts

当使用组合式 API 编写 Vue 组件时，您可能希望 useStore 返回类梁让型化的 store。为了 useStore 能正确返回类型化的 store，必须执行以下步骤：

store.ts

main.ts

在 main.ts 已经声明配置过Vuex和Vue-Router之后，在 旦渣掘script setup lang="ts" 或者 script lang="ts" 中按需导入 store 和 router 即可使用其属性和方法。

router.ts

[img]

Vite+Vue3+Vue-Router@4+Pinia 快速起步

vite 相当于 vue-cli 脚手架，因此应该首先安装它：

然后按照提示选择选项完成创建

接着进入项目目录 vite-project ，并安装一下依赖：

依然是在项消侍铅目目录内：

然后创建 router/router.js 文件：

再回到 main.js 文件，引入带路由表的拿好路由实例，并以插件形式使用：

在 src 下创建目录 pages ，用于存放页面，并且在其中任意创建两个文件 home.vue 和 About.vue

并且修改 App.vue 页面以供页面渲染：

同样是在项目根目录：

再创建 pinia/pinia.js :

然后在谈毕 main.js 中引入，并以插件形式使用：

创建 pinia/store.js :

在About组件修改state数据，在Home组件显示state数据

修改一下Home组件：

再修改一下About组件：

关于vitevue和vitevue3 日历插件的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。