当前位置：首页 > news >正文

vite创建vue3项目并进行配置

news 来源：原创 2025/4/29 11:54:31

创建项目

方式一

执行以下命令之后输入项目名称选择框架选择语言例如

 pnpm create vite

在这里插入图片描述

此方式创建的项目较为干净 0手起步只包含一些基础依赖例如vue vite等项目目录如下

"scripts": {"dev": "vite","build": "vue-tsc -b && vite build","preview": "vite preview"},"dependencies": {"vue": "^3.5.13"},"devDependencies": {"@vitejs/plugin-vue": "^5.2.2","@vue/tsconfig": "^0.7.0","typescript": "~5.7.2","vite": "^6.3.1","vue-tsc": "^2.2.8"}

此处我们对此项目在.vscode进行一些项目的配置配置中包含了相关注释解释

{// 指定 TypeScript 的 SDK 路径，告诉 VS Code 使用项目本地安装的 TypeScript，而不是全局安装的版本。// 这样可以确保 TypeScript 的版本与项目的依赖一致，避免版本不匹配导致的问题。"typescript.tsdk": "node_modules/typescript/lib",// 包管理工具"npm.packageManager": "pnpm",// 设置 Tab 的宽度为 2 个空格"editor.tabSize": 2,// 配置 Prettier 的最大行宽为 100，超过此宽度会自动换行。"prettier.printWidth": 100, // 超过最大值换行// 指定默认的代码格式化工具为 Prettier"editor.defaultFormatter": "esbenp.prettier-vscode",// 设置文件的换行符为 \n（Unix 风格）"files.eol": "\n",// 搜索排除规则 vscode搜索时的排除规则"search.exclude": {"**/node_modules": true,"**/*.log": true,"**/*.log*": true,"**/bower_components": true,"**/dist": true,"**/elehukouben": true,"**/.git": true,"**/.gitignore": true,"**/.svn": true,"**/.DS_Store": true,"**/.idea": true,"**/.vscode": false,"**/yarn.lock": true,"**/tmp": true,"out": true,"dist": true,"node_modules": true,"CHANGELOG.md": true,"examples": true,"res": true,"screenshots": true,"yarn-error.log": true,"**/.yarn": true},// 配置vscode文件资源管理器中需要隐藏的文件或文件夹"files.exclude": {"**/.cache": true,"**/.editorconfig": true,"**/.eslintcache": true,"**/bower_components": true,"**/.idea": true,"**/tmp": true,"**/.git": true,"**/.svn": true,"**/.hg": true,"**/CVS": true,"**/.DS_Store": true},// 文件监视排除规则 例如mode_modules文件夹下的文件有变动也不需要监视"files.watcherExclude": {"**/.git/objects/**": true,"**/.git/subtree-cache/**": true,"**/.vscode/**": true,"**/node_modules/**": true,"**/tmp/**": true,"**/bower_components/**": true,"**/dist/**": true,"**/yarn.lock": true},// 启用 Stylelint 插件，用于检查 CSS、Less、SCSS 等文件的样式问题"stylelint.enable": true,// 配置了需要校验的文件类型，包括 vue 文件"stylelint.validate": ["css", "less", "postcss", "scss", "vue", "sass"],// 路径别名映射"path-intellisense.mappings": {"@/": "${workspaceRoot}/src"},/*语言格式化工具esbenp.prettier-vscode Prettier rvest.vs-code-prettier-eslint Prettier-ESLint*/"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[javascriptreact]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[typescript]": {"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"},"[typescriptreact]": {"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"},"[html]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[css]": {"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"},"[less]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[scss]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[markdown]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[vue]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},// 保存自动格式化"editor.formatOnSave": true,"editor.codeActionsOnSave": {"source.fixAll.eslint": "explicit"// "source.fixAll.stylelint": "explicit"},"i18n-ally.localesPaths": ["src/locales"],"i18n-ally.keystyle": "nested","i18n-ally.sortKeys": true,"i18n-ally.namespace": false,"i18n-ally.enabledParsers": ["ts"],"i18n-ally.sourceLanguage": "en","i18n-ally.displayLanguage": "zh-CN","i18n-ally.enabledFrameworks": ["vue", "react"],// cSpell.words 是 VS Code 的拼写检查插件 Code Spell Checker 的配置项"cSpell.words": ["brotli","browserslist","codemirror","commitlint","cropperjs","echart","echarts","esnext","pinia","pnpm","qrcode","sider","sortablejs","stylelint","svgs","unocss","unplugin","unref","videojs","vueuse","wangeditor"],// 控制相关文件嵌套展示"explorer.fileNesting.enabled": true,"explorer.fileNesting.expand": false,"explorer.fileNesting.patterns": {"*.ts": "$(capture).test.ts, $(capture).test.tsx","*.tsx": "$(capture).test.ts, $(capture).test.tsx","*.env": "$(capture).env.*","package.json": "pnpm-lock.yaml,yarn.lock,LICENSE,README*,CHANGELOG*,CNAME,.gitattributes,.eslintrc-auto-import.json,.gitignore,prettier.config.js,stylelint.config.js,commitlint.config.js,.stylelintignore,.prettierignore,.gitpod.yml,.eslintrc.js,.eslintignore"},"terminal.integrated.scrollback": 10000,"nuxt.isNuxtApp": false
}

方式二(推荐)

pnpm create vue@latest

执行以下命令 pnpm create vue@latest进行选项式的创建项目选择好自己需要用到的项直接enter就可以了下载后相关配置就已经为我们配置好了只需要根据需要略微改动就可以直接使用了

PS E:\demo> pnpm create vue@latest
T  Vue.js - The Progressive JavaScript Framework
|
o  请输入项目名称：
|  create-vue3
|
*  请选择要包含的功能： (↑/↓ 切换，空格选择，a 全选，回车确认)
|  [+] TypeScript
|  [ ] JSX 支持
|  [+] Router（单页面应用开发）
|  [+] Pinia（状态管理）
|  [ ] Vitest（单元测试）
|  [ ] 端到端测试
|  [+] ESLint（错误预防）
|  [+] Prettier（代码格式化）
—

package.json

"scripts": {"dev": "vite","build": "run-p type-check \"build-only {@}\" --","preview": "vite preview","build-only": "vite build","type-check": "vue-tsc --build","lint": "eslint . --fix","format": "prettier --write src/"},"dependencies": {"pinia": "^3.0.1","vue": "^3.5.13","vue-router": "^4.5.0"},"devDependencies": {"@tsconfig/node22": "^22.0.1","@types/node": "^22.14.0","@vitejs/plugin-vue": "^5.2.3","@vue/eslint-config-prettier": "^10.2.0","@vue/eslint-config-typescript": "^14.5.0","@vue/tsconfig": "^0.7.0","eslint": "^9.22.0","eslint-plugin-vue": "~10.0.0","jiti": "^2.4.2","npm-run-all2": "^7.0.2","prettier": "3.5.3","typescript": "~5.8.0","vite": "^6.2.4","vite-plugin-vue-devtools": "^7.7.2","vue-tsc": "^2.2.8"}