Vue3 + Vite + vuex 项目配置

0 vue3开发者工具

1 vue3官网vite配置

$ npm init @vitejs/app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

这里选择的是vue的js版本

npm i
npm run dev

2 安装 prettier 官网

npm install --save-dev --save-exact prettier

然后按照官网依次添加 .prettierrc.json .prettierignore 测试 成功。

3 git 初始化仓库 git init

4 安装lint-staged、husky 文档
配置 git hooks 让 prettier 能够随着 commit 自动运行
npx mrm@2 lint-staged
整完之后记得在package.json中lint-staged项的检查里添加上 .vue

  "lint-staged": {
    "*.{js,css,md,vue}": "prettier --write"
  }

5 安装 commitlint 并配置 husky
配置commitlint : 规则
npm install --save-dev @commitlint/config-conventional @commitlint/cli
echo module.exports = {extends: ['@commitlint/config-conventional']} > commitlint.config.js
配置自动运行commitlint
npx husky add .husky/commit-msg "npx commitlint --edit $1" 这行命令会失效,替代方法:
手动在.husky文件夹建立文件commit-msg,内容为

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx commitlint --edit $1

6 安装 element-plus 文档 引入

7 添加 vue-router
npm install vue-router@4

N 添加 TIM
npm install tim-js-sdk --save

vue全局变量 window prototype vuex 参考链接:

https://segmentfault.com/q/1010000019252359/a-1020000019252544
https://blog.csdn.net/qq_40259641/article/details/90635778
https://blog.qianxiaoduan.com/archives/435

其他链接
基础总结:https://www.kancloud.cn/cyyspring/vuejs/944325

vuex资料:

https://zhuanlan.zhihu.com/p/356886441
https://github.com/weipxiu/Vue-vuex/tree/master/src/store
https://github.com/GitfishHub/vue.3.0easyencapsulation
https://blog.csdn.net/wu_xianqiang/article/details/110293672
https://juejin.cn/post/6845166891393105928#heading-5
http://www.zhongweipeng.cn/2019/02/23/vuex%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86%E6%A8%A1%E5%BC%8F/

### 回答1: Vue 3 和 Vite 可以用来开发各种前端项目,包括单页面应用 (SPAs)、移动应用和企业级应用。它们可以提供快速的构建速度和优秀的性能,适用于许多不同类型的项目Vite 作为一个构建工具,提供了一种快速的方法来构建 Vue 应用,而 Vue 3 则是一个前端框架,提供了强大的功能来构建和管理前端项目。因此,使用 Vue 3 和 Vite 的组合可以为开发人员提供一个高效、易用的开发环境。 ### 回答2: Vue3 Vite可以用于开发各种类型的项目,无论是小型项目还是大型项目。 1. 单页应用(SPA):Vue3 Vite提供了轻量级的开发环境和快速的热重载,使得开发SPA变得更加高效和容易。 2. 多页应用(MPA):Vue3 Vite支持多页应用的开发,可以根据不同的路由配置生成多个页面。通过Vue Router来管理多个页面之间的路由切换。 3. 移动应用:Vue3 Vite通过Vue Native开发框架可以用于开发跨平台的移动应用。可以利用Vue3的响应式能力和组件化开发模式实现移动应用的快速开发和高效管理。 4. 后台管理系统:Vue3 Vite可以用于开发后台管理系统,提供了丰富的组件库和开箱即用的解决方案。可以快速构建出现代化的、用户友好的后台管理界面。 5. 静态网页生成器:Vue3 Vite作为静态网页生成器的一部分,可以将Vue组件编译为静态HTML文件,方便部署和分享。可以用于构建静态博客、文档和展示页面。 总的来说,Vue3 Vite可以应用于各种类型的项目,无论是前端应用、后台管理系统还是移动应用。它的优势在于快速的开发环境、高效的热重载和强大的生态系统,使得项目开发更加高效、稳定和可靠。 ### 回答3: Vue 3 Vite是一个快速的打包工具,适用于各种类型的项目。它具有以下优点,使其适用于各种项目: 1. 快速构建:Vite使用原生ES模块导入的方式来处理模块,而不是传统的打包方式,这样可以极大的提高构建的速度。无论是小型项目还是大型项目,使用Vite都能够快速启动并且快速构建,提高开发效率。 2. 高效开发:Vite支持热模块替换(HMR),可以在不刷新整个页面的情况下局部更新页面,使开发过程更加高效。此外,Vite还内置了TypeScript支持,开发者可以使用更强大的类型检查功能来提高代码质量和开发效率。 3. 简单配置Vite配置非常简单,只需一个Vite配置文件即可。开发者无需关心繁琐的配置,可以快速启动项目并进行开发。同时,Vite支持自定义插件,可以根据项目需求扩展功能。 4. 生态系统支持:Vite基于Vue 3构建,与Vue生态系统完美兼容。开发者可以使用Vue 3的强大功能和丰富的插件来构建各种类型的项目。此外,Vite还支持Vue Router、Vuex等主流插件,方便开发者使用和集成。 基于以上特点,Vue 3 Vite非常适用于Web应用开发、单页面应用(SPA)、中小型项目等。同时,由于其构建速度快、开发效率高,也适用于大型项目的快速原型验证和开发阶段。无论是开发移动端应用、PC应用,还是快速构建原型,Vue 3 Vite都能够满足项目需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值