项目搭建
命令行工具输入以下命令，生成模板项目
npm init vue@latest
说明
✔ Project name: … <项目名称>
✔ Add TypeScript? … No / Yes ---------------------------------------- #安装 TypeScript
✔ Add JSX Support? … No / Yes ---------------------------------------- #安装对 JSX 语法的支持
✔ Add Vue Router for Single Page Application development? … No / Yes - #安装 Vue Router 路由管理
✔ Add Pinia for state management? … No / Yes ------------------------- #安装 Pinia 状态管理
✔ Add Vitest for Unit testing? … No / Yes ---------------------------- #安装 Vitest 单元测试
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes ------- #安装 Cypress 端到端测试
✔ Add ESLint for code quality? … No / Yes ---------------------------- #安装 ESLint 代码校验
✔ Add Prettier for code formatting? … No / Yes ----------------------- #安装 Prettier 统一代码规范
模板项目的基本目录结构
node_modules --------------------------------- 第三方依赖文件
public --------------------------------------- 公共文件夹（如icon图标）
src ------------------------------------------ 项目页面目录
.env ----------------------------------------- 环境变量配置
.env.development ----------------------------- 开发环境下的配置文件
.env.production ------------------------------ 生产环境下的配置文件
.eslintignore -------------------------------- 配置 Eslint 忽略检查的文件目录、文件等
.eslintrc.js --------------------------------- 配置 Eslint 代码校验规则
.gitignore ----------------------------------- 配置 Git 忽略目录或文件
.prettierrc.js ------------------------------- 配置代码规范，统一代码风格
index.html ----------------------------------- 项目挂载的 html 页面
LICENSE -------------------------------------- 开源声明
package-lock.json ---------------------------- 主要用于记录了上一次安装的依赖的版本号（为升级后不兼容，提供回退参考）
package.json --------------------------------- 该项目包必要的说明文件
plugins.d.ts --------------------------------- 插件类型声明文件
README.md ------------------------------------ 该项目说明文件
vue.d.ts ------------------------------------- .vue文件类型声明文件
source.d.ts ---------------------------------- 资源类型声明文件
tsconfig.json -------------------------------- Ts编译器配置文件
vite.config.ts ------------------------------- vite配置文件
模板项目下几个重要的配置文件说明
package.json 文件
{
"name": "",// ----------------------------------------- 项目名称
"version": "1.0.0",// --------------------------------- 项目的版本
"description": "快速了解该项目的功能及作用", // --------- 项目的描述
"scripts": {// ---------------------------------------- 定义命令别名,当命令很长时可以使用别名替换
"dev": "vite", // 默认 command 的值为 serve, mode 为 development
"build": "vue-tsc --noEmit && vite build", // 默认 command 的值为 build, mode 为 production
"preview": "vite preview"
},
"keywords": [],// -------------------------------------- 关键字,它允许我们使用关键字去描述当前的项目
"author": "",//----------------------------------------- 项目的作者
"license": "MIT",//------------------------------------- 项目遵循的协议,默认是ISC也就是开放源代码的协议
"dependencies": {},//----------------------------------- 项目所需要依赖的第三方模块（包）
"devDependencies": {},//-------------------------------- 仅开发时所需要依赖的第三方模块（包）
"repository": {},// ------------------------------------ 项目仓库地址
"browserslist": []// ----------------------------------- 适用的浏览器
// ...
}
vite.config.ts 文件
Vite 会自动解析 项目根目录下名为 vite.config.js 的文件，请根据实际需要进行配置
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
import { defineConfig, loadEnv, ConfigEnv } from 'vite';
const pathResolve = (dir: string): any => {
return resolve(__dirname, '.', dir);
};
const alias: Record<string, string> = {
'/@': pathResolve('./src/'),
};
/**
* @command 在 Vite 的 API 中，在开发环境下 command 的值为 serve（在 CLI 中， vite dev 和 vite serve 是 vite 的别名），而在生产环境下为 build（vite build）
* @mode 根据当前工作目录中的 `mode` 加载 .env 文件
* @ssrBuild 用于服务端渲染时
*/
export default defineConfig(({ command, mode, ssrBuild }) => {
// 使用 Vite 导出的 loadEnv 函数来加载指定的 .env 文件，设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀
const env = loadEnv(mode, process.cwd(), '')
return {
// vite 共享配置
root: process.cwd(), // ----------------- 项目根目录（index.html 文件所在的位置）
base: 'workbench', // ----------------- 开发或生产环境服务的公共基础路径
mode: "development", // ----------------- 默认： 'development' 用于开发，'production' 用于构建
define: { __APP_ENV__: env.APP_ENV }, // --- 定义全局常量替换方式
plugins: [vue()], // ----------------- 需要用到的插件数组
resolve: { alias }, // ----------------- 定义文件路径别名，当使用文件系统路径的别名时，请始终使用绝对路径，否则无法解析
css: { // ----------------- css 配置
postcss: { // ----------------- 内联的 PostCSS 配置
plugins: [{
postcssPlugin: 'internal:charset-removal',
AtRule: { charset: (atRule) => { if (atRule.name === 'charset') { atRule.remove() }}},
}],
},
},
// 开发时服务器配置选项 执行 npm run dev 时
server: {
host: 'localhost', // 指定服务器应该监听哪个 IP 地址
port: 3000, // 端口
open: false, // 在开发服务器启动时自动在浏览器中打开应用程序
// 为开发服务器配置自定义代理规则，如前端接口调用： fetch('/api/dev')
// 此时会通过上面的代理规则，将源地址代理到目标地址，从而访问目标地址的接口 https://googxh.xyz/api/dev
proxy: {
'/dev': {
target: 'https://googxh.xyz',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/dev/, ''),
},
},
},
// 构建打包时配置选项 执行 npm run build 时
build: {
outDir: 'bundle',// 指定输出路径（相对于 项目根目录)
sourcemap: false, // 构建后是否生成 source map 文件
chunkSizeWarningLimit: 1500, // 规定触发警告的 chunk(文件块) 大小
rollupOptions: { // 自定义底层的 Rollup 打包配置
output: {
entryFileNames: `assets/[name].${new Date().getTime()}.js`,
chunkFileNames: `assets/[name].${new Date().getTime()}.js`,
assetFileNames: `assets/[name].${new Date().getTime()}.[ext]`,
compact: true,
manualChunks: {
vue: ['vue', 'vue-router', 'pinia'],
echarts: ['echarts'],
},
},
},
//生产环境自动删除console
terserOptions: {
compress: {
drop_console: true, // 自动去除console
drop_debugger: true, // 清除 debugger 语句
},
ie8: true,
output: { comments: true }, // 删除注释
},
},
}
})
tsconfig.json 文件
TypeScript 编译器配置文件，请根据实际需要进行配置
{
"compilerOptions": {
"incremental": true, // ----------------- TS编译器在第一次编译之后会生成一个存储编译信息的文件，第二次编译会在第一次的基础上进行增量编译，可以提高编译的速度
"tsBuildInfoFile": "./buildFile", // ---- 增量编译文件的存储位置
"target": "esnext" /* 目标语言的版本: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
"module": "esnext" /* 生成代码的模板标准: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
"lib": ["esnext", "dom", "dom.iterable", "scripthost"] /* Specify library files to be included in the compilation. */,
"allowJs": true, /* 允许编译器编译 JS，JSX 文件 */
"checkJs": true, /* 允许在 JS 文件中报错，通常与 allowJS 一起使用 */
"jsx": "preserve" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
"declaration": true, /* 生成声明文件，开启后会自动生成声明文件 */
"declarationDir": "./file", /* 指定生成声明文件存放目录 */
"declarationMap": true, /* 为声明文件生成 sourceMap '.d.ts' file. */
"sourceMap": true, /* 生成目标文件的 sourceMap 文件 */
"outFile": "./", /* 将多个相互依赖的文件生成一个文件，可以用在AMD模块中，即开启时应设置"module": "AMD" */
"outDir": "./", /* 指定输出目录 */
"rootDir": "./", /* 指定输出文件目录(用于输出)，用于控制输出目录结构 */
"composite": true, /* Enable project compilation */
"removeComments": true, /* 删除注释 */
"noEmit": true, /* 不输出文件,即编译后不会生成任何js文件 */
"noEmitOnError": true, /* 发送错误时不输出任何文件 */
"noEmitHelpers": true, /* 不生成helper函数，减小体积，需要额外安装，常配合importHelpers一起使用 */
"importHelpers": true /* 通过 tslib 引入helper 函数，文件必须是模块 */,
"downlevelIteration": true /* 降级遍历器实现，如果目标源是 Es3/Es5 ，那么遍历器会有降级的实现 */,
"isolatedModules": true /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */,
"strict": true /* 开启所有严格的类型检查*/,
"noImplicitAny": true, /* 不允许隐式的 any 类型 */
"strictNullChecks": true, /* 不允许把 null、undefined 赋值给其他类型的变量 */
"strictFunctionTypes": true, /* 不允许函数参数双向协变 */
"strictBindCallApply": true, /* 严格的 bind/call/apply 检查 */
"strictPropertyInitialization": true, /* 类的实例属性必须初始化 */
"noImplicitThis": true, /* 不允许 this 有隐式的 any 类型 */
"alwaysStrict": true, /* 在代码中注入'use strict' */
"noUnusedLocals": true, /* 检查只声明、未使用的局部变量(只提示不报错) */
"noUnusedParameters": true, /* 检查未使用的函数参数(只提示不报错) */
"noImplicitReturns": true, /* 每个分支都会有返回值 */
"noFallthroughCasesInSwitch": true, /* 防止switch语句贯穿(即如果没有break语句后面不会执行) */
"noUncheckedIndexedAccess": true, /* 没有在接口里声明的对象的属性，会添加一个 undefined 类型 */
"moduleResolution": "node" /* 模块解析策略，ts 默认用 node 的解析策略，即相对的方式导入, 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
"baseUrl": "." /* 解析非相对模块的基地址，默认是当前目录 */,
"paths": { "/@/*": ["src/*"] } /* 路径映射，相对于 baseUrl */,
"rootDirs": [], /* 将多个目录放在一个虚拟目录下，用于运行时，即编译后引入文件的位置可能发生变化，这也设置可以虚拟src和out在同一个目录下，不用再去改变路径也不会报错 */
"typeRoots": [], /* 声明文件目录，默认时 node_modules/@types */
"types": ["vite/client"] /* 加载的声明文件包 */,
"allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
"esModuleInterop": true /* 允许 export 导出，由 import from 导入. */,
"preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
"allowUmdGlobalAccess": true, /* 允许在模块中全局变量的方式访问umd模块. */
"sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
"mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
"inlineSourceMap": true, /* 生成目标文件的inline SourceMap，inline SourceMap会包含在生成的js文件中. */
"inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
"experimentalDecorators": true /* Enables experimental support for ES7 decorators. */,
"emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
"skipLibCheck": true /* Skip type checking of declaration files. */,
"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
}
}
.eslintrc.js 文件
请根据实际需要进行配置
module.exports = {
root: true,
env: {
browser: true,
es2021: true,
node: true,
},
parser: 'vue-eslint-parser',
parserOptions: {
ecmaVersion: 12,
parser: '@typescript-eslint/parser',
sourceType: 'module',
},
extends: ['plugin:vue/vue3-essential', 'plugin:vue/essential', 'eslint:recommended'],
plugins: ['vue', '@typescript-eslint'],
rules: {
'@type-eslint/ban-ts-ignore': 'off',
'@type-eslint/explicit-function-return-type': 'off',
'@type-eslint/no-explicit-any': 'off',
'@type-eslint/no-var-requires': 'off',
'@type-eslint/no-empty-function': 'off',
'@type-eslint/no-use-before-define': 'off',
'@type-eslint/ban-ts-comment': 'off',
'@type-eslint/ban-types': 'off',
'@type-eslint/no-non-null-assertion': 'off',
'@type-eslint/explicit-module-boundary-types': 'off',
'vue/custom-event-name-casing': 'off',
'vue/attributes-order': 'off',
'vue/one-component-per-file': 'off',
'vue/html-closing-bracket-newline': 'off',
'vue/max-attributes-per-line': 'off',
'vue/multiline-html-element-content-newline': 'off',
'vue/singleline-html-element-content-newline': 'off',
'vue/attribute-hyphenation': 'off',
'vue/html-self-closing': 'off',
'vue/no-multiple-template-root': 'off',
'vue/require-default-prop': 'off',
'vue/no-v-model-argument': 'off',
'vue/no-arrow-functions-in-watch': 'off',
'vue/no-template-key': 'off',
'vue/no-v-html': 'off',
'vue/comment-directive': 'off',
'vue/no-parsing-error': 'off',
'vue/no-deprecated-v-on-native-modifier': 'off',
'vue/multi-word-component-names': 'off',
'no-useless-escape': 'off',
'no-sparse-arrays': 'off',
'no-prototype-builtins': 'off',
'no-constant-condition': 'off',
'no-use-before-define': 'off',
'no-restricted-globals': 'off',
'no-restricted-syntax': 'off',
'generator-star-spacing': 'off',
'no-unreachable': 'off',
'no-multiple-template-root': 'off',
'no-unused-vars': 'error',
'no-v-model-argument': 'off',
'no-case-declarations': 'off',
// 'no-console': 'error',
},
};
.prettierrc.js 文件
请根据实际需要进行配置
module.exports = {
printWidth: 150, // 一行最多多少个字符
tabWidth: 2, // 指定每个缩进级别的空格数
useTabs: true, // 使用制表符而不是空格缩进行
semi: true, // 在语句末尾打印分号
singleQuote: true, // 使用单引号而不是双引号
quoteProps: 'as-needed', // 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"
jsxSingleQuote: false, // 在JSX中使用单引号而不是双引号
trailingComma: 'es5', // 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值"<none|es5|all>"，默认none
bracketSpacing: true, // 在对象文字中的括号之间打印空格
jsxBracketSameLine: false, // jsx 标签的反尖括号需要换行
arrowParens: 'always', // 在单独的箭头函数参数周围包括括号 always：(x) => x \ avoid：x => x
rangeStart: 0, // 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
rangeEnd: Infinity,
requirePragma: false, // 指定要使用的解析器，不需要写文件开头的 @prettier
insertPragma: false, // 不需要自动在文件开头插入 @prettier
proseWrap: 'preserve', // 使用默认的折行标准 always\never\preserve
htmlWhitespaceSensitivity: 'css', // 指定HTML文件的全局空格敏感度 css\strict\ignore
vueIndentScriptAndStyle: fale, // Vue文件脚本和样式标签缩进
endOfLine: 'lf', // 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>"
};
9394
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
