vue3+vite+TS项目搭建

最新推荐文章于 2024-03-14 11:09:47 发布
最新推荐文章于 2024-03-14 11:09:47 发布
阅读量1.8k 收藏 7
点赞数
文章标签： vue.js npm javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52026514/article/details/120982775
版权

使用 Vite 创建项目npm init vite@latest

参考Vite 官方指南

√ Project name: ... lagou-shop-admin
√ Select a framework: » vue
√ Select a variant: » vue-ts

Scaffolding project in C:\Users\lpz\Projects\lagou-shop-admin...

Done. Now run:

  cd lagou-shop-admin
  npm install
  npm run dev

初始目录结构说明

├── public
│   └── favicon.ico
├── src
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── App.vue
│   ├── main.ts
│   ├── shims-vue.d.ts
│   └── vite-env.d.ts
├── .gitignore
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── tsconfig.json
└── vite.config.ts

在安装了 Vite 的项目中，可以在 npm scripts 中使用 vite 可执行文件，或者直接使用 npx vite 运行它。下面是通过脚手架创建的 Vite 项目中默认的 npm scripts：

{
  "scripts": {
    "dev": "vite", // 启动开发服务器
    "build": "vite build", // 为生产环境构建产物
    "serve": "vite preview" // 本地预览生产构建产物
  }
}

可以指定额外的命令行选项，如 --port 或 --https。运行 npx vite --help 获得完整的命令行选项列表。

初始化 Git 仓库

git init

git add .

git commit -m "init"

git remote add origin 远程仓库地址

git push -u origin master

调整目录结构

.
├── public                  # 不需要打包的静态资源
│   └── favicon.ico
├── src
│   ├── api                 # 后台 API 接口封装
│   ├── assets              # 需要打包的静态资源
│   ├── components          # 公共组件
│   ├── composables         # 通用的组合式 API
│   ├── layout              # 页面布局模板
│   ├── plugins             # 插件
│   ├── router              # 路由
│   ├── store               # Vuex 存储
│   ├── styles              # 样式
│     └── index.scss        # 全局通用样式
│   ├── utils               # 工具模块
│   ├── views               # 路由页面
│   ├── App.vue             # 根组件
│   ├── main.ts             # 入口模块
│   ├── shims-vue.d.ts      # 补充 .vue 模块类型声明
│   └── vite-env.d.ts       # 补充 vite 类型声明
├── .gitignore
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── tsconfig.json
└── vite.config.ts

代码规范和 ESLint

基础配置

1、安装 ESLint 到项目中

npm install eslint --save-dev

2、初始化 ESLint 配置

npx eslint --init

? How would you like to use ESLint? ...
  To check syntax only
  To check syntax and find problems
> To check syntax, find problems, and enforce code style

? What type of modules does your project use? ...
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these
  
 ? Which framework does your project use? ...
  React
> Vue.js
  None of these
  
? Does your project use TypeScript? » No / Yes
  
? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
√ Browser
√ Node

? How would you like to define a style for your project? ...
> Use a popular style guide
  Answer questions about your style
  Inspect your JavaScript file(s)
  
? Which style guide do you want to follow? ...
  Airbnb: https://github.com/airbnb/javascript
> Standard: https://github.com/standard/standard
  Google: https://github.com/google/eslint-config-google
  XO: https://github.com/xojs/eslint-config-xo
  
 ? What format do you want your config file to be in? ...
> JavaScript
  YAML
  JSON
  
 Checking peerDependencies of eslint-config-standard@latest
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest eslint-config-standard@latest eslint@^7.12.1 eslint-plugin-import@^2.22.1 eslint-plugin-node@^11.1.0 eslint-plugin-promise@^4.2.1 || ^5.0.0 @typescript-eslint/parser@latest
? Would you like to install them now with npm?

+ eslint-plugin-import@2.23.4
+ eslint-plugin-node@11.1.0
+ eslint-config-standard@16.0.3
+ eslint-plugin-vue@7.11.1
+ eslint@7.29.0
+ @typescript-eslint/parser@4.27.0
+ @typescript-eslint/eslint-plugin@4.27.0
+ eslint-plugin-promise@5.1.0

3、ESLint 配置文件

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    // 'plugin:vue/essential',
    
    // 使用 Vue 3 规则
    // https://eslint.vuejs.org/user-guide/#bundle-configurations
    'plugin:vue/vue3-strongly-recommended',
    'standard'
  ],
  parserOptions: {
    ecmaVersion: 12,
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  plugins: [
    'vue',
    '@typescript-eslint'
  ],
  rules: {}
}

4、在 npm scripts 中添加验证脚本

"scripts": {
	...
  "lint": "eslint src/**/*.{js,jsx,vue,ts,tsx} --fix",
}

vue-eslint-plugin

https://eslint.vuejs.org/)

编译器宏和 defineProps、defineEmits、no-undef 规则警告

您需要定义全局变量 （打开新窗口）在您的 ESLint 配置文件中。

如果您不想定义全局变量，请使用 import { defineProps, defineEmits } from ‘vue’.

示例 .eslintrc.js：

module.exports = {
  globals: {
    defineProps: "readonly",
    defineEmits: "readonly",
    defineExpose: "readonly",
    withDefaults: "readonly"
  }
}

另请参阅ESLint - 指定全局变量 > 使用配置文件。

编辑器集成

● 禁用 Vetur
● 安装 eslint 插件
● 安装 volar 插件

您必须配置eslint.validate扩展的选项来检查.vue文件，因为扩展默认只针对*.js或*.jsx文件。

示例.vscode/settings.json：

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ]
}

配置 git commit hook

● https://github.com/okonet/lint-staged

安装：

 npx mrm@2 lint-staged

配置：

// package.json
{
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "serve": "vite preview",
    "tsc": "vue-tsc --noEmit",
    "lint": "eslint ./src/**/*.ts ./src/**/*.vue --cache --fix",
    "prepare": "husky install"
  },
  "dependencies": {
    "@form-create/element-ui": "^2.5.7",
    "axios": "^0.21.1",
    "element-plus": "^1.0.2-beta.48",
    "nprogress": "^0.2.0",
    "path-to-regexp": "^6.2.0",
    "utility-types": "^3.10.0",
    "vue": "^3.1.1",
    "vue-router": "^4.0.8",
    "vuex": "^4.0.1",
    "vxe-table": "^4.0.22",
    "xe-utils": "^3.3.0"
  },
  "devDependencies": {
    "@types/node": "^15.12.2",
    "@types/nprogress": "^0.2.0",
    "@typescript-eslint/eslint-plugin": "^4.27.0",
    "@typescript-eslint/parser": "^4.27.0",
    "@vitejs/plugin-vue": "^1.2.3",
    "@vue/compiler-sfc": "^3.1.1",
    "eslint": "^7.29.0",
    "eslint-config-standard": "^16.0.3",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^5.1.0",
    "eslint-plugin-vue": "^7.11.1",
    "husky": "^6.0.0",
    "lint-staged": "^11.0.0",
    "sass": "^1.34.1",
    "typescript": "^4.1.3",
    "vite": "^2.3.5",
    "vue-tsc": "^0.0.24"
  },
  "lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "npm run lint",
      // "git add" 之前的版本需要手动把 lint 过程中修改的代码手动 add，新版本不需要了
    ]
  }
}

在开发和构建中进行代码规范校验

● https://github.com/vitejs/awesome-vite#plugins
● https://github.com/gxmari007/vite-plugin-eslint

注意 ESLint 中 cache 的问题。

Git commit 提交规范

推荐参考：
● Commit message 和 Change log 编写指南
● Git 使用规范流程
● Git 工作流程

统一团队 Git commit 日志标准，便于后续代码 review，版本发布以及日志自动化生成等等。

常用 commit 类型说明：

  • feat：新功能（feature）
  • fix：修补bug
  • docs：文档（documentation）
  • style： 格式（不影响代码运行的变动）
  • refactor：重构（即不是新增功能，也不是修改bug的代码变动）
  • test：增加测试
  • chore：构建过程或辅助工具的变动
#安装 commitlint cli 和常规配置
npm install --save-dev @commitlint/{config-conventional,cli}
#对于 Windows：
npm install --save-dev @commitlint/config-conventional @commitlint/cli

#配置 commitlint 使用常规配置
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

// 要在创建之前对提交进行 lint 提交，您可以使用 Husky 的commit-msg钩子：
# Install Husky v6
npm install husky --save-dev
# or
yarn add husky --dev

# Activate hooks
npx husky install
# or
yarn husky install

# Add hook
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

相关工具：

  • commitlint：验证 git commit 日志是否符合规范
  • Commitizen：辅助编写符合 git commit 规范的工具
L-freeMan
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3+Vite+Ts 项目实战 01 Vite 创建项目、ESLint+TS+GitCommit配置、Vue3新特性介绍
皮蛋很白的博客
04-20 6873
前置声明： Vue3 和 Vite 还在持续更新，中文文档仍未全部完善，该笔记的内容在未来可能过时，建议多参考英文文档，使用最新版本。 本案例使用的后端 API 服务，基于 Express 搭建，使用 json 文件管理数据，Git 仓库和使用文档。 本案例旨在学习 Vite 和 Vue3 搭建配置应用，并没有开发完整的业务功能。 项目初始化 使用 Vite 创建项目 Vite 官方中文文档 (vitejs.dev) 官方声明：Vite 需要 Node.js 版本 >= 12.0.0。然而，.
Shop-admin:基于vue,创建Vue-element-admin，创建购物商城管理后台
05-28
vue-admin-template 这是一个极简的 vue admin 管理后台。它只包含了 Element UI & axios & iconfont & permission control & lint，这些搭建后台必要的东西。 目前版本为 v4.0+ 基于 vue-cli 进行构建，若你想使用旧版本，可以切换分支到，它不依赖 vue-cli。 Extra 如果你想要根据用户角色来动态生成侧边栏和 router，你可以使用该分支 Build Setup # 克隆项目 git clone https://github.com/PanJiaChen/vue-admin-template.git # 进入项目目录 cd vue-admin-template # 安装依赖 npm install # 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm
vue3+ts+vite 项目实战笔记
最新发布
qiao
03-14 580
方法1：每增加一个全局组件，就手动引入，然后进行注册//main.ts 文件中//引入全局组件//注册全局组件注：如果要注册很多全局组件，这里就需要引入、注册多次，比较麻烦方法2：components 下新增 index.ts，在里面引入组件，遍历注册组件//引入 全局组件SvgIcon,Test//对外暴露插件对象//install 方法会在页面初始化时候执行，该方法有一个参数，该参数是 main.ts 中创建的 app 对象// 循环注册全局组件})//main.ts 文件。
一篇文章教小白学会搭建 vite + ts + vue3 项目，手把手教程，不会算我输（第一篇）
qq_17335549的博客
12-29 1万+
【前端工程化实践】手把手教小白搭建 vite + ts + vue3 项目
Vue+Vite+TS
weixin_44374471的博客
11-14 3099
【代码】Vue+Vite+TS。
2023 最新最细 vite+vue3+ts 多页面项目架构，建议收藏备用！
坚信万物皆可切的切图仔
04-18 1万+
在搭建的过程中，一定要注意因为修改了项目根目录（root）所带来的问题，利用将路径重置到相对于项目根的位置！关于如何使用这个多页面脚手架，可以看 README.md 文件。github地址。
vue+ts+vite详细入门及实践
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
08-11 1万+
vue+ts+vite搭建前端项目
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
vue3+vite2+ts+vant3 项目demo
04-16
此项目 按照大佬文章 一步步学习搭建 https://juejin.cn/post/7036745610954801166?share_token=5dd94aae-bed2-4733-93ac-306118376443；感谢大佬
vue3+vite+ts 仿淘宝放大镜效果
09-17
1.本demo是一个类似于淘宝放大镜的效果。 2.使用vue3+vite搭建 3.实现了图片点击轮播和移入放大的效果 4.下载下来可直接使用，必须真实 有问题可以直接提问
vue3+vite+ts环境搭建步骤
10-21
vue3+vite+ts环境搭建步骤
Vue3 + Ts + ElementPlus + Vite2 从零搭建后台管理系统.zip
05-13
Vue3 + Ts + ElementPlus + Vite2 从零搭建后台管理系统 Vue3 + Ts + ElementPlus + Vite2 从零搭建后台管理系统 Vue3 + Ts + ElementPlus + Vite2 从零搭建后台管理系统 Vue3 + ...
vue3+ts+vite自适应项目——搭建项目
DW14687的博客
04-28 4245
本项目主要目的是熟练vue3和ts的使用，内容大致包括项目搭建、layout布局、自适应、element-plus引入及自定义主题、vue3等相关操作。感兴趣就继续往下看吧~我们接下来自定义elemnet-plus的主题色，尺寸等~),),打开 vite.config.ts 我们需要 修改全局样式路径 和 更改主题样式 ，如下：//element-plus 按需导入plugins:vue(),//element-plus 按需导入。
vite+vue3+ts 手把手教你创建一个vue3项目
热门推荐
weixin_59916662的博客
10-17 5万+
基本全程cv安装router，less / scss，pinia，axios，element / Ant Design Vue，Echarts ，mockjs，以及如何配置@别名，自定义组件，vue-devtools插件。
vite+vue3+ts项目构建详细步骤（配置多语言版本）
失眠时间的博客
05-15 9590
由于之前几乎都是使用Webpack 构建项目，偶尔使用了gulp。最近两年才开始使用Vue3开发项目，所以特意记录下Vite构建期间的使用方式。后续也会花时间写下webpack构建项目的文章，期待后期的更新～
vue3+ts+vite 路由详解
微光无限的博客
11-03 5893
vue3+ts+vite 路由详解
vite+vue3+Ts搭建基础项目框架
郊眠寺
01-14 1153
最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。没办法，后面就只能跟着会vue3的同事一起开发，参照同事写的模块开发，结果发现除了有些写法不太一样其他的也都差不多，意识到这个之后就不慌了，然后就是边学习边开发。
Vue3+Vite+TS后台项目 ~ 1.vite 创建项目
yuan
09-21 1233
管什么真理无穷，进一寸有一寸的欢喜 —— 胡适 搭建 Vite 项目： Vite 官方中文文档 兼容性注意 Vite 需要 Node.js 版本 >= 12.0.0。 # 使用 npm $ npm init vite@latest # 使用 yarn $ yarn create vite # 使用 pnpm $ pnpm dlx create-vite 小编这里使用的是 npm # 进入 存放项目的目录 cd '目录’ # 使用 npm 创建 vite 项目 npm init v.
Vue3 + Vite + Ts自己封装的基础组件库发布npm ，npm安装使用（Volar ）支持TS 类型提示功能（vite-plugin-dts 使用）
wocwin的博客
06-20 5709
Vue3 + Vite + Ts自己封装的基础组件库发布npm ，npm安装使用（Volar ）支持TS 类型提示功能（vite-plugin-dts 使用）
vue3+vite+ts项目搭建
05-20
以下是基于Vue3、Vite、TypeScript的项目搭建步骤： 1. 安装 Node.js 和 npm 在官网下载并安装 Node.js，npm会随之安装。 2. 创建项目 打开命令行工具，使用以下命令创建一个新的 Vue3 项目： ``` npm init ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值