做网站有包括哪些东西,抖音seo关键词优化排名,网站怎么做谷歌推广,wordpress对搜索引擎的可见性前言
之前写了命令创建Vue项目#xff0c;但是事实上我们可以直接用编译器直接创建项目#xff0c;这里我使用webstorm#xff08;因为我是前后端兼修的所以我习惯使用Idea家族的编译器#xff09;
只写前端的推荐用VsCode前后端都写的推荐用webstorm
新建项目 项目初始…前言
之前写了命令创建Vue项目但是事实上我们可以直接用编译器直接创建项目这里我使用webstorm因为我是前后端兼修的所以我习惯使用Idea家族的编译器
只写前端的推荐用VsCode前后端都写的推荐用webstorm
新建项目 项目初始目录
yueerba/ # 项目根目录
├── node_modules/ # 依赖包安装目录包含项目所需的所有第三方依赖
├── public/ # 公共资源目录用于存放不需要经过构建的静态资源
│ ├── index.html # 主页面模板作为整个应用的入口页面
│ └── ...
├── src/ # 源代码目录包含应用的核心代码
│ ├── assets/ # 静态资源如图像、样式等
│ ├── components/ # Vue组件用于构建页面和 UI
│ ├── views/ # 页面级组件通常和路由相关
│ ├── App.vue # 根组件应用的主要 Vue 组件
│ └── main.js # 项目入口文件初始化 Vue 应用和导入全局资源
├── .gitignore # Git 忽略配置文件指定哪些文件或目录不会被提交到版本控制
├── babel.config.js # Babel 配置文件用于转译新的 JavaScript 语法特性
├── jsconfig.json # JavaScript 项目配置文件配置代码智能感知等
├── package.json # 项目依赖和配置文件包含项目的元数据和依赖信息
├── README.md # 项目说明文件描述项目的基本信息和使用说明
├── vue.config.js # Vue CLI 配置文件用于自定义 Vue 项目的构建和开发配置
├── yarn.lock # 锁定依赖版本的文件确保依赖在不同环境中的一致性
新建.env
.env
NODE_ENVproduction
VUE_APP_PREVIEWfalse
VUE_APP_BASE_API/api.env.development
NODE_ENVdevelopment
VUE_APP_PREVIEWtrue
VUE_APP_BASE_API/api.env.preview
NODE_ENVproduction
VUE_APP_PREVIEWtrue
VUE_APP_BASE_API/api移除package.json 中的eslintConfig和browserslist配置
{name: yueerba,version: 0.1.0,private: true,scripts: {serve: vue-cli-service serve,build: vue-cli-service build,lint: vue-cli-service lint},dependencies: {core-js: ^3.8.3,vue: ^3.2.13},devDependencies: {babel/core: ^7.12.16,babel/eslint-parser: ^7.12.16,vue/cli-plugin-babel: ~5.0.0,vue/cli-plugin-eslint: ~5.0.0,vue/cli-service: ~5.0.0,eslint: ^7.32.0,eslint-plugin-vue: ^8.0.3},eslintConfig: {root: true,env: {node: true},extends: [plugin:vue/vue3-essential,eslint:recommended],parserOptions: {parser: babel/eslint-parser},rules: {}},browserslist: [ 1%,last 2 versions,not dead,not ie 11]
}新建.browserslistrc 1% ## 适用于市场份额大于1%的浏览器
last 2 versions ## 适用于每个浏览器的最近两个版本
not dead ## 排除已不再被支持的浏览器
not ie 11 ## 排除Internet Explorer 11
新建.editorconfig
# 通用设置
[*]
# 使用 UTF-8 字符集
charset utf-8
# 使用 LF换行符
end_of_line lf
# 文件末尾不需要插入空行
insert_final_newline false
# 使用空格作为缩进
indent_style space
# 缩进大小为 2 个空格
indent_size 2# 针对特定文件类型的设置
[{*.ng,*.sht,*.html,*.shtm,*.shtml,*.htm}]
# 使用空格作为缩进
indent_style space
# 缩进大小为 2 个空格
indent_size 2# 针对另一系列文件类型的设置
[{*.jhm,*.xslt,*.xul,*.rng,*.xsl,*.xsd,*.ant,*.tld,*.fxml,*.jrxml,*.xml,*.jnlp,*.wsdl}]
# 使用空格作为缩进
indent_style space
# 缩进大小为 2 个空格
indent_size 2# 针对一些配置文件的设置
[{.babelrc,.stylelintrc,jest.config,.eslintrc,.prettierrc,*.json,*.jsb3,*.jsb2,*.bowerrc}]
# 使用空格作为缩进
indent_style space
# 缩进大小为 2 个空格
indent_size 2# 针对 .svg 文件的设置
[*.svg]
# 使用空格作为缩进
indent_style space
# 缩进大小为 2 个空格
indent_size 2# 针对 .js.map 文件的设置
[*.js.map]
# 使用空格作为缩进
indent_style space
# 缩进大小为 2 个空格
indent_size 2# 针对 .less 文件的设置
[*.less]
# 使用空格作为缩进
indent_style space
# 缩进大小为 2 个空格
indent_size 2# 针对 .vue 文件的设置
[*.vue]
# 使用空格作为缩进
indent_style space
# 缩进大小为 2 个空格
indent_size 2# 针对另一些配置文件的设置
[{.analysis_options,*.yml,*.yaml}]
# 使用空格作为缩进
indent_style space
# 缩进大小为 2 个空格
indent_size 2新建.eslintrc.js
module.exports {root: true, // 根配置文件env: {node: true, // 运行环境为 Node.js},extends: [plugin:vue/vue3-essential, // 使用 Vue 3 的基本规则eslint:recommended, // 使用 ESLint 推荐的规则plugin:prettier/recommended, // 集成 Prettier 的推荐规则],parserOptions: {parser: babel/eslint-parser, // 使用 Babel 解析器},rules: {no-debugger: process.env.NODE_ENV production ? error : off, // 在生产环境禁用 debuggerno-console: process.env.NODE_ENV production ? error : off, // 在生产环境禁用 consolespace-before-function-paren: 0, // 函数定义括号前不需要空格vue/require-default-prop: off, // 不要求默认的 propvue/require-prop-types: off, // 不要求 prop 的类型generator-star-spacing: off, // 禁用 generator 函数 * 后的空格警告no-mixed-operators: 0, // 允许混合使用运算符vue/max-attributes-per-line: [// 每行最多属性数2,{singleline: 5, // 单行最多 5 个属性multiline: 1, // 多行模式下每行最大属性数量},],vue/attribute-hyphenation: 0, // 不强制属性使用连字符vue/html-self-closing: 0, // 不强制自闭合标签vue/component-name-in-template-casing: 0, // 组件名大小写不敏感vue/html-closing-bracket-spacing: 0, // 不强制标签闭合前的空格vue/singleline-html-element-content-newline: 0, // 单行元素内容不需要新行vue/no-unused-components: 0, // 允许定义未使用的组件vue/multiline-html-element-content-newline: 0, // 多行元素内容不需要新行vue/no-use-v-if-with-v-for: 0, // 允许同时使用 v-if 和 v-forvue/html-closing-bracket-newline: 0, // 标签闭合括号不需要新行vue/no-parsing-error: 0, // 允许存在解析错误no-tabs: 0, // 允许使用制表符quotes: [// 引号配置2,single,{avoidEscape: true, // 避免转义allowTemplateLiterals: true, // 允许模板字符串},],semi: [// 分号配置2,never,{beforeStatementContinuationChars: never,},],no-delete-var: 2, // 禁止删除变量prefer-const: [// 建议使用 const2,{ignoreReadBeforeAssign: false,},],template-curly-spacing: off, // 关闭模板字符串中花括号间的空格indent: off, // 关闭缩进检查},overrides: [{files: [**/__tests__/*.{j,t}s?(x), **/tests/unit/**/*.spec.{j,t}s?(x)],env: {jest: true, // 在测试文件中启用 Jest 环境},},],
}
新建.prettierrc
{printWidth: 120,semi: false,singleQuote: true,prettier.spaceBeforeFunctionParen: true
}新增依赖
删除所有依赖项
删除node_modules文件夹并删除对应的配置
{name: yueerba,version: 0.1.0,private: true,scripts: {serve: vue-cli-service serve,build: vue-cli-service build,lint: vue-cli-service lint},dependencies: {},devDependencies: {}
}安装生产依赖项都取最新的
npm install ant-design-vue axios core-js echarts enquire.js highlight.js lodash.clonedeep lodash.get lodash.pick md5 mockjs2 moment nprogress sortablejs store v-viewer vditor vue vue-clipboard2 vue-container-query vue-copy-to-clipboard vue-cropper vue-grid-layout vue-i18n vue-router vue-svg-component-runtime vue-upload-component vuex安装开发依赖项都取最新的
npm install -D ant-design/colors vue/cli-plugin-babel vue/cli-plugin-eslint vue/cli-plugin-router vue/cli-plugin-unit-jest vue/cli-plugin-vuex vue/cli-service vue/eslint-config-standard vue/test-utils babel-eslint babel-plugin-import babel-plugin-transform-remove-console compression-webpack-plugin eslint eslint-plugin-html eslint-plugin-react eslint-plugin-vue git-revision-webpack-plugin less less-loader opencollective opencollective-postinstall vue-svg-icon-loader vue-template-compiler webpack-theme-color-replacer完成之后生成的依赖项并补全一下配置
json
{name: yueerba, // 项目名称version: 0.1.0, // 项目版本private: true, // 声明项目为私有scripts: {dev: set NODE_OPTIONS--openssl-legacy-provider vue-cli-service serve, // 启动开发服务器的命令build: set NODE_OPTIONS--openssl-legacy-provider vue-cli-service build, // 构建生产版本的命令test:unit: set NODE_OPTIONS--openssl-legacy-provider vue-cli-service test:unit, // 运行单元测试的命令lint: set NODE_OPTIONS--openssl-legacy-provider vue-cli-service lint, // 运行代码风格检查的命令build:preview: set NODE_OPTIONS--openssl-legacy-provider vue-cli-service build --mode preview, // 构建预览版本的命令lint:nofix: set NODE_OPTIONS--openssl-legacy-provider vue-cli-service lint --no-fix // 运行代码风格检查但不自动修复的命令},dependencies: {// Ant Design 的 Vue 组件库ant-design-vue: ^4.0.0,// HTTP 请求库axios: ^1.4.0,// JavaScript 标准库的新特性的垫片core-js: ^3.8.3,// 可视化图表库echarts: ^5.4.3,// 媒体查询库用于响应式设计enquire.js: ^2.1.6,// 代码高亮库highlight.js: ^11.8.0,// Lodash 的深拷贝函数lodash.clonedeep: ^4.5.0,// Lodash 的属性获取函数lodash.get: ^4.4.2,// Lodash 的属性选择函数lodash.pick: ^4.4.0,// MD5 哈希函数md5: ^2.3.0,// 生成模拟数据的库mockjs2: ^1.0.8,// 日期时间操作库moment: ^2.29.4,// 页面加载进度条库nprogress: ^0.2.0,// 可拖拽排序库sortablejs: ^1.15.0,// 数据持久化库store: ^2.0.12,// 图片查看器v-viewer: ^1.6.4,// 实时预览 Markdown 编辑器vditor: ^3.9.4,// Vue.js 框架vue: ^3.2.13,// 复制文本到剪贴板库vue-clipboard2: ^0.3.3,// Vue 容器查询库vue-container-query: ^0.1.0,// 复制文本到剪贴板的 Vue 组件vue-copy-to-clipboard: ^1.0.3,// 图片剪裁组件vue-cropper: ^0.6.2,// 可拖拽布局库vue-grid-layout: ^2.4.0,// 国际化库vue-i18n: ^9.2.2,// Vue 路由库vue-router: ^4.2.4,// 在运行时渲染 Vue 组件的 SVG 图标库vue-svg-component-runtime: ^1.0.1,// Vue 文件上传组件vue-upload-component: ^2.8.23,// Vue 状态管理库vuex: ^4.1.0},devDependencies: {// Ant Design 的颜色库ant-design/colors: ^7.0.0,// Vue CLI 插件用于集成 Babelvue/cli-plugin-babel: ^5.0.8,// Vue CLI 插件用于集成 ESLintvue/cli-plugin-eslint: ^5.0.8,// Vue CLI 插件用于集成 Vue 路由vue/cli-plugin-router: ^5.0.8,// Vue CLI 插件用于集成 Jest 进行单元测试vue/cli-plugin-unit-jest: ^5.0.8,// Vue CLI 插件用于集成 Vuex 状态管理vue/cli-plugin-vuex: ^5.0.8,// Vue CLI 服务用于启动开发服务器和构建应用vue/cli-service: ^5.0.8,// Vue 的 ESLint 配置基于标准规范vue/eslint-config-standard: ^8.0.1,// Vue 的测试工具库vue/test-utils: ^2.4.1,// Babel 解析器用于在 ESLint 中解析 JavaScriptbabel-eslint: ^10.1.0,// Babel 插件用于按需导入 Ant Design 的组件babel-plugin-import: ^1.13.8,// Babel 插件用于移除控制台输出babel-plugin-transform-remove-console: ^6.9.4,// Webpack 插件用于压缩文件compression-webpack-plugin: ^10.0.0,// ESLint用于检查代码规范eslint: ^8.47.0,// ESLint 插件用于处理 HTML 文件中的脚本块eslint-plugin-html: ^7.1.0,// ESLint 插件用于检查 React 代码规范eslint-plugin-react: ^7.33.2,// ESLint 插件用于检查 Vue 代码规范eslint-plugin-vue: ^9.17.0,// Webpack 插件用于获取 Git 版本信息git-revision-webpack-plugin: ^5.0.0,// Less 编译器less: ^4.2.0,// Less 加载器用于将 Less 转换成 CSSless-loader: ^11.1.3,// Open Collective 支持库opencollective: ^1.0.3,// Open Collective 安装后脚本opencollective-postinstall: ^2.0.3,// Vue SVG 图标加载器vue-svg-icon-loader: ^2.1.1,// Vue 模板编译器vue-template-compiler: ^2.7.14,// Webpack 主题颜色替换插件webpack-theme-color-replacer: ^1.4.7}
}少了的依赖项
npm install webpack
npm install eslint eslint-plugin-vue vue/eslint-config-prettier prettier --save-dev
npm install babel/eslint-parser --save-dev需要移除的依赖
npm uninstall babel-eslint --save-dev配置一下eslint设置 更改babel.config.js
const IS_PROD [production, prod].includes(process.env.NODE_ENV)const plugins []
if (IS_PROD) {plugins.push(transform-remove-console) // 如果是生产环境移除 console
}// 懒加载 ant-design-vue
// 如果您使用按需导入使用以下代码
plugins.push([import,{libraryName: ant-design-vue,libraryDirectory: es,style: true, // style: true 会加载 less 文件},
])module.exports {presets: [vue/cli-plugin-babel/preset,[babel/preset-env,{useBuiltIns: entry,corejs: 3,},],],plugins,
}
更改jsconfig.json
{compilerOptions.comment: {target: 目标编译版本为 ECMAScript 6,module: 生成模块的代码风格为 ES6 模块规范,moduleResolution: 模块解析策略为 Node.js 风格,baseUrl: 模块导入时的基本路径这里设置为当前目录,paths: 模块导入路径的映射以 / 开头的映射到 src/ 目录,lib: 包含的 TypeScript 标准库文件包括最新特性、DOM 相关定义和宿主环境定义},compilerOptions: {target: es6,module: esnext,moduleResolution: node,baseUrl: ./,paths: {/*: [src/*]},lib: [esnext,dom,dom.iterable,scripthost]},exclude.comment: {exclude: 排除的文件或文件夹不会被编译},exclude: [node_modules, dist],include.comment: {include: 包含的文件会被编译},include: [src/**/*]
}
更vue.config.js
const webpack require(webpack)
const path require(path)
const { GitRevisionPlugin } require(git-revision-webpack-plugin)
const GitRevision new GitRevisionPlugin()
const buildDate JSON.stringify(new Date().toLocaleString())
const createThemeColorReplacerPlugin require(./config/plugin.config)
const CompressionWebpackPlugin require(compression-webpack-plugin)
const productionGzipExtensions [js, css]function resolve(dir) {return path.join(__dirname, dir)
}// 获取当前 Git 版本哈希值
function getGitHash() {try {return GitRevision.version()} catch (e) {/* empty */}return unknown
}// 判断是否为生产环境
const isProd process.env.NODE_ENV production// 外部 CDN 资源配置
const assetsCDN {externals: {vue: Vue,vue-router: VueRouter,vuex: Vuex,axios: axios,},css: [],js: [//cdn.jsdelivr.net/npm/vue3.2.13/dist/vue.global.min.js,//cdn.jsdelivr.net/npm/vue-router4.2.4/dist/vue-router.min.js,//cdn.jsdelivr.net/npm/vuex4.1.0/dist/vuex.min.js,//cdn.jsdelivr.net/npm/axios1.4.0/dist/axios.min.js,],
}// Vue 配置对象
const vueConfig {configureWebpack: {plugins: [// 忽略 moment.js 中的所有本地化文件new webpack.IgnorePlugin({resourceRegExp: /^\.\/locale$/,contextRegExp: /moment$/,}),// 定义全局常量用于标识应用的版本、Git 哈希值和构建日期new webpack.DefinePlugin({APP_VERSION: ${require(./package.json).version},GIT_HASH: JSON.stringify(getGitHash()),BUILD_DATE: buildDate,}),// 配置 compression-webpack-plugin 压缩插件new CompressionWebpackPlugin({algorithm: gzip,// 仅压缩指定文件类型的文件test: new RegExp(\\.( productionGzipExtensions.join(|) )$),// 文件大小大于 10KB 时才会进行压缩threshold: 10240,// 压缩比例设置minRatio: 0.8,}),],// 如果是生产环境则引用外部库避免打包到项目中externals: isProd ? assetsCDN.externals : {},},chainWebpack: (config) {// 配置路径别名方便在代码中引用config.resolve.alias.set($, resolve(src)).set(assets, resolve(src/assets)).set(views, resolve(src/views))// 处理 SVG 文件支持内联和外部引用const svgRule config.module.rule(svg)svgRule.uses.clear()svgRule.oneOf(inline).resourceQuery(/inline/).use(vue-svg-icon-loader).loader(vue-svg-icon-loader).end().end().oneOf(external).use(file-loader).loader(file-loader).options({name: assets/[name].[hash:8].[ext],})// 如果是生产环境将 CDN 资源添加到 HTML 中if (isProd) {config.plugin(html).tap((args) {args[0].cdn assetsCDNreturn args})}},css: {// 配置 Less 主题loaderOptions: {less: {modifyVars: {// 修改 Ant Design 主题颜色primary-color: #2f54eb,},javascriptEnabled: true,},},},devServer: {// 开发服务器端口port: 80,// 配置代理将请求转发到后端 APIproxy: {[process.env.VUE_APP_BASE_API]: {target: http://127.0.0.1:8080,changeOrigin: true,pathRewrite: {[^ process.env.VUE_APP_BASE_API]: ,},},},disableHostCheck: true, // 解决使用外网映射工具映射时的报错},// 是否生成生产环境的 Source MapproductionSourceMap: false,lintOnSave: undefined,// 指定需要进行 Babel 转译的依赖transpileDependencies: [core-js, register-service-worker],// Vue 3 的新特性开启runtimeCompiler: true,
}// 仅在预览模式下启用插件
if (process.env.VUE_APP_PREVIEW true) {console.log(VUE_APP_PREVIEW, true)// 添加创建主题颜色替换插件到 webpack 插件中vueConfig.configureWebpack.plugins.push(createThemeColorReplacerPlugin())
}// 导出 Vue 配置对象
module.exports vueConfig
plugin.config.js
// 引入 webpack-theme-color-replacer 模块
const ThemeColorReplacer require(webpack-theme-color-replacer)
// 引入 ant-design/colors 中的生成函数
const generate require(ant-design/colors/lib/generate).default// 获取一系列 Ant Design 的颜色变化
const getAntdSerials (color) {// 淡化即 less 的 tintconst lightens new Array(9).fill().map((t, i) {return ThemeColorReplacer.varyColor.lighten(color, i / 10)})// 生成颜色调色板const colorPalettes generate(color)// 将颜色转换为 RGB 值const rgb ThemeColorReplacer.varyColor.toNum3(color.replace(#, )).join(,)return lightens.concat(colorPalettes).concat(rgb)
}// 定义主题颜色替换插件的配置选项
const themePluginOption {fileName: css/theme-colors-[contenthash:8].css, // 输出文件名含 hash 值matchColors: getAntdSerials(#1890ff), // 主色系列为 #1890ff// 修改样式选择器以解决样式覆盖问题changeSelector(selector) {switch (selector) {// 添加选择器的修改规则case .ant-calendar-today .ant-calendar-date:return :not(.ant-calendar-selected-date):not(.ant-calendar-selected-day) selectorcase .ant-btn:focus,.ant-btn:hover:return .ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger),.ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger)case .ant-btn.active,.ant-btn:active:return .ant-btn.active:not(.ant-btn-primary):not(.ant-btn-danger),.ant-btn:active:not(.ant-btn-primary):not(.ant-btn-danger)case .ant-steps-item-process .ant-steps-item-icon .ant-steps-icon:case .ant-steps-item-process .ant-steps-item-icon.ant-steps-icon:return :not(.ant-steps-item-process) selector// 添加更多选择器的修改规则default:return selector}},
}// 创建主题颜色替换插件并导出
const createThemeColorReplacerPlugin () new ThemeColorReplacer(themePluginOption)module.exports createThemeColorReplacerPlugin
themePluginConfig.js
// 导出一个主题配置对象用于实现动态切换应用的主题色
export default {theme: [// 明亮主题选项{key: dark, // 主题的唯一标识fileName: dark.css, // 输出的主题样式文件名theme: dark, // 主题类型为深色},{key: #F5222D,fileName: #F5222D.css,modifyVars: {primary-color: #F5222D, // 修改主题颜色变量},},{key: #FA541C,fileName: #FA541C.css,modifyVars: {primary-color: #FA541C,},},{key: #FAAD14,fileName: #FAAD14.css,modifyVars: {primary-color: #FAAD14,},},{key: #13C2C2,fileName: #13C2C2.css,modifyVars: {primary-color: #13C2C2,},},{key: #52C41A,fileName: #52C41A.css,modifyVars: {primary-color: #52C41A,},},{key: #2F54EB,fileName: #2F54EB.css,modifyVars: {primary-color: #2F54EB,},},{key: #722ED1,fileName: #722ED1.css,modifyVars: {primary-color: #722ED1,},},// 深色主题选项{key: #F5222D,theme: dark, // 主题类型为深色fileName: dark-#F5222D.css,modifyVars: {primary-color: #F5222D,},},{key: #FA541C,theme: dark,fileName: dark-#FA541C.css,modifyVars: {primary-color: #FA541C,},},{key: #FAAD14,theme: dark,fileName: dark-#FAAD14.css,modifyVars: {primary-color: #FAAD14,},},{key: #13C2C2,theme: dark,fileName: dark-#13C2C2.css,modifyVars: {primary-color: #13C2C2,},},{key: #52C41A,theme: dark,fileName: dark-#52C41A.css,modifyVars: {primary-color: #52C41A,},},{key: #2F54EB,theme: dark,fileName: dark-#2F54EB.css,modifyVars: {primary-color: #2F54EB,},},{key: #722ED1,theme: dark,fileName: dark-#722ED1.css,modifyVars: {primary-color: #722ED1,},},],
}
新增jest.config.js
module.exports {preset: vue/cli-plugin-unit-jest,
}; import { shallowMount } from vue/test-utils
import HelloWorld from /components/HelloWorld.vuedescribe(HelloWorld.vue, () {it(renders props.msg when passed, () {const msg new messageconst wrapper shallowMount(HelloWorld, {props: { msg },})expect(wrapper.text()).toMatch(msg)})
})
安装并使用cypress
在项目中集成 Cypress 并使用它进行端到端测试是一个很好的实践可以帮助您确保应用的各个部分都正常工作。以下是集成 Cypress 并进行测试的一般步骤 如果你选择下载 Cypress 的压缩包并手动安装可以按照以下步骤进行操作 设置环境变量 CYPRESS_INSTALL_BINARY 下载对应的安装包然后在项目目录下的终端窗口执行以下命令
npm config set CYPRESS_INSTALL_BINARY${C:\\Users\\binary\\cypress.zip}安装 Cypress
在项目根目录下使用以下命令安装 Cypress
npm install cypress --save-dev创建如下测试结构 创建 Cypress 配置文件
在项目根目录下创建 cypress.config.js 文件并根据项目需要配置 Cypress。以下是一个简单的示例
const { defineConfig } require(cypress)module.exports defineConfig({// 指定测试用例的 fixtures 文件夹路径fixturesFolder: tests/e2e/fixtures,// 指定截图保存的文件夹路径screenshotsFolder: tests/e2e/screenshots,// 指定录像保存的文件夹路径videosFolder: tests/e2e/videos,e2e: {// 这里导入了旧的 Cypress 插件。稍后您可能希望通过导入这些插件来清理代码。// 用于设置 Cypress 节点事件的回调函数setupNodeEvents(on, config) {// 使用 ./tests/e2e/plugins/index.js 文件中的回调函数return require(./tests/e2e/plugins/index.js)(on, config)},// 使用新的配置选项 e2e.specPattern 来指定测试用例的匹配模式specPattern: tests/e2e/specs/**/*.cy.{js,jsx,ts,tsx},// 指定支持文件的路径supportFile: tests/e2e/support/index.js,},
})
创建tests/e2e/plugins/index.js
module.exports (on, config) {// 注释: 使用 on 函数注册文件预处理器这里使用 webpack 预处理器// 注释: webpackOptions 包含 vue/cli-service/webpack.config 的配置选项// 注释: watchOptions 可以进行额外的监视选项设置// on(file:preprocessor, webpack({// webpackOptions: require(vue/cli-service/webpack.config),// watchOptions: {}// }))// 返回一个配置对象将原始配置与新的配置项合并return Object.assign({}, config, {// 指定测试用例的 fixtures 文件夹路径fixturesFolder: tests/e2e/fixtures,// 指定截图保存的文件夹路径screenshotsFolder: tests/e2e/screenshots,// 指定录像保存的文件夹路径videosFolder: tests/e2e/videos,e2e: {// 指定测试用例的匹配模式使用 glob 模式来匹配特定文件specPattern: tests/e2e/specs/**/*.cy.{js,jsx,ts,tsx},// 指定支持文件的路径例如定制的命令或断言supportFile: tests/e2e/support/index.js,},})
}
运行 Cypress
在项目根目录下运行以下命令启动 Cypress
npx cypress open这会打开 Cypress 的测试运行界面您可以选择执行测试用例。 编写测试用例
在 tests/e2e/specs 目录下您可以创建测试用例文件。这些文件可以是 .spec.js 或 .spec.ts 等文件具体格式取决于您的项目配置。
以下是一个简单的测试用例示例
// https://docs.cypress.io/api/table-of-contentsdescribe(My First Test, () {it(Visits the app root url, () {cy.visit(/);cy.contains(h1, Welcome to Your Vue.js App);});
});
运行测试
在 Cypress 界面中单击测试用例的文件名它将在浏览器中运行测试。
自动化测试
您可以使用命令行在 CI/CD 流程中运行 Cypress 测试。例如您可以在 package.json 中添加以下脚本
{scripts: {test:e2e: cypress run}
}然后使用以下命令运行自动化测试
npm run test:e2e这就是集成 Cypress 并进行测试的基本步骤。根据您的项目需求您还可以配置更多的选项编写更多的测试用例并使用 Cypress 的各种功能来提高测试覆盖率和质量。请参考 Cypress 官方文档 以获取更多详细信息和示例。
新增postcss.config.js
这里我只是使用了Autoprefixer: 这是一个流行的 PostCSS 插件用于自动添加浏览器前缀以确保您的样式在不同浏览器中具有一致的效果。在配置中使用 “autoprefixer”: {} 来启用。
module.exports {plugins: {autoprefixer: {},},
}
新增.travis.yml构建的话用Jenkins吧这个玩意限制太多只提一下
Travis CI 提供了一些免费的服务但也有一些限制和付费选项。以下是关于 Travis CI 免费使用的一些信息 免费服务Travis CI 提供了免费的 CI/CD 服务您可以在 GitHub 仓库上使用 Travis CI 进行构建和测试。 限制免费服务有一些限制例如每月最多可以运行一定数量的构建构建的时间可能有限制以及并发构建的数量也可能受到限制。 付费选项Travis CI 还提供了付费的服务套餐称为 Travis CI Pro 和 Travis CI Team这些付费选项可以提供更多的构建次数、并发构建和更长的构建时间等额外的功能和资源。 开源项目Travis CI 为开源项目提供免费的构建和测试服务只要您的项目是开源的并且托管在 GitHub 上您就可以免费使用 Travis CI 进行构建和测试。 个人项目对于私有项目Travis CI 提供了一定的免费构建时间额度但可能需要在超过免费额度后支付费用或考虑升级到付费套餐。
请注意Travis CI 的政策和服务可能会随着时间的变化而发生变化建议您在使用之前查看官方网站上的最新信息以获取准确的信息。如果您对 Travis CI 的具体定价、功能和服务有疑问可以前往 Travis CI 官方网站或联系其支持团队获取更多信息。
language: node_js
node_js:- v18.17.1
cache: yarn
script:- yarn- yarn run lint --no-fix yarn run build
新增LICENSE MIT 许可证
非常宽松的许可证允许修改和再分发代码甚至可以闭源商用。要求包含版权和许可声明。适合那些希望代码被广泛使用和共享的开发者。
MIT LicenseCopyright (c) [2023] [yueerba]Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the Software), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.THE SOFTWARE IS PROVIDED AS IS, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
启动项目 npm run dev
