建设一个网站需要注意的事项,网站广告赚钱吗,家在深圳论坛业主论坛,aso应用商店优化文章目录 使用vite创建vue3项目及项目的配置1.环境准备2.项目配置ESLint校验代码工具配置 - js代码检测工具1.安装ESLint到开发环境 devDependencies2.生成配置文件:.eslint.cjs**3.安装vue3环境代码校验插件**4. 修改.eslintrc.cjs配置文件5.生成ESLint忽略文件6.在package.js… 文章目录 使用vite创建vue3项目及项目的配置1.环境准备2.项目配置ESLint校验代码工具配置 - js代码检测工具1.安装ESLint到开发环境 devDependencies2.生成配置文件:.eslint.cjs**3.安装vue3环境代码校验插件**4. 修改.eslintrc.cjs配置文件5.生成ESLint忽略文件6.在package.json新增运行脚本 prettier配置 - 格式化检测工具1.安装prettier依赖包2.prettierrc.json添加规则3. 新建.prettierignore忽略文件4. 在package.json新增运行脚本 husky配置 提交代码前进行的操作配置commitlint 统一提交规范 3.项目集成3.1 集成element-plus ui组件库3.2 src文件夹别名配置3.3 环境变量的配置3.4 SVG图标配置 使用vite创建vue3项目及项目的配置
1.环境准备
使用vite搭建项目vite需要nodejs版本14.18、16
node v18.16.1pnpm 8.7.4
pnpm:performant npm(高性能的npm)由npm/yarn衍生而来解决了npm/yarn内部潜在的bug极大的优化了性能扩展了使用场景。
pnpm安装指令
npm i -g pnpm创建项目
pnpm create vite
cd # 进入项目
pnpm install # 安装依赖 vitejs/plugin-vue 4.3.4 typescript 5.2.2 vite 4.4.9 vue-tsc 1.8.10
pnpm run dev # 运行项目打开项目需要手动在浏览器输入地址。 修改package.json文件的字段 dev: vite --open这样使用pnpm run dev命令会自动打开浏览器。
2.项目配置
VSCode 有对应插件Prettier - Code formatter、ESlint、Stylelint可以实现相同的功能
以下配置适用于协同开发的大项目配置。
ESLint校验代码工具配置 - js代码检测工具
eslint:提供一个插件化的javaScript代码检测工具
1.安装ESLint到开发环境 devDependencies
//完整写法
pnpm install --save-dev eslint
//简写
pnpm i eslint -D2.生成配置文件:.eslint.cjs**
npx eslint --init.eslint.cjs文件
// 对外暴露的配置对象
module.exports {env: { // eslint的工作环境browser: true,es2021: true // 校验js语法},extends: [ //规则的继承//全部规则默认是关闭的这个配置项会开启推荐规则(推荐需要遵守的规则)eslint:recommended,//vue3语法规则plugin:typescript-eslint/recommended,//ts语法规则plugin:vue/vue3-essential],overrides: [ //为特定类型的文件指定处理器{env: {node: true},files: [.eslintrc.{js,cjs}],parserOptions: {sourceType: script}}],//指定解析器选项parserOptions: {ecmaVersion: latest, //校验ECMA最新版本parser: typescript-eslint/parser,//指定解析器当前表示ts解析器还可以选择BabelESLint babel解析器、默认Esprima解析器sourceType: module// 设置为},// ESLint支持使用第三方插件在使用插件之前必须使用npm安装plugins: [typescript-eslint,vue],//ESLint校验规则rules: {}
}
3.安装vue3环境代码校验插件**
# 让所有与prettier规则存在冲突的Eslint rules失效并使用prettier进行代码检查
eslint-config-prettier: ^8.6.0,
eslint-plugin-import: ^2.27.5,
eslint-plugin-node: ^11.1.0,
# 运行更漂亮的Eslint使prettier规则优先级更高Eslint优先级低
eslint-plugin-prettier: ^4.2.1,
# vue.js的Eslint插件查找vue语法错误发现错误指令查找违规风格指南)
eslint-plugin-vue: ^9.9.0,
# 该解析器允许使用Eslint校验所有babel code
babel/eslint-parser: ^7.19.1,# 指令
pnpm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier eslint-plugin-node babel/eslint-parser4. 修改.eslintrc.cjs配置文件
module.exports {//..../* 规则的状态* off 或 0 关闭规则* warn 或 1 打开的规则作为警告不影响代码执行* error 或 2 规则作为一个错误代码不能执行界面报错*/rules: {// eslinthttps://eslint.bootcss.com/docs/rules/// key为规则右侧为规则的状态no-var: error, // 要求使用 let 或 const 而不是 varno-multiple-empty-lines: [warn, { max: 1 }], // 不允许多个空行no-console: process.env.NODE_ENV production ? error : off,no-debugger: process.env.NODE_ENV production ? error : off,no-unexpected-multiline: error, // 禁止空余的多行no-useless-escape: off, // 禁止不必要的转义字符// typeScript (https://typescript-eslint.io/rules)typescript-eslint/no-unused-vars: error, // 禁止定义未使用的变量typescript-eslint/prefer-ts-expect-error: error, // 禁止使用 ts-ignoretypescript-eslint/no-explicit-any: off, // 禁止使用 any 类型typescript-eslint/no-non-null-assertion: off,typescript-eslint/no-namespace: off, // 禁止使用自定义 TypeScript 模块和命名空间。typescript-eslint/semi: off,// eslint-plugin-vue (https://eslint.vuejs.org/rules/)vue/multi-word-component-names: off, // 要求组件名称始终为 “-” 链接的单词vue/script-setup-uses-vars: error, // 防止script setup使用的变量template被标记为未使用vue/no-mutating-props: off, // 不允许组件 prop的改变vue/attribute-hyphenation: off, // 对模板中的自定义组件强制执行属性命名样式},
}5.生成ESLint忽略文件
文件名.eslintignore 作用设置不需要进行校验的文件夹
dist // 打包文件
node_modules // 依赖文件6.在package.json新增运行脚本
// 新增运行脚本
scripts: {// ....lint: eslint src, // 运行lint指令时eslint校验src文件夹里面的文件fix: eslint src --fix, // 对于不符合规则的语法进行纠正
}prettier配置 - 格式化检测工具
1.安装prettier依赖包
pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier2.prettierrc.json添加规则
创建prettierrc.json配置文件
{singleQuote: true, // 使用单引号semi: true, //语句最后方的分号bracketSpacing: true,htmlWhitespaceSensitivity: ignore,endOfLine: auto,trailingComma: all,tabWidth: 2 //缩进占2个位置
}3. 新建.prettierignore忽略文件
设置不需要格式化的文件夹
/dist/*
/html/*
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*4. 在package.json新增运行脚本
scripts: {// ....lint: eslint src, // 运行lint指令时eslint校验src文件夹里面的文件fix: eslint src --fix, // 对于不符合规则的语法进行纠正format: prettier --write \./**/*.{html,vue,ts,js,json,md}\,
}husky配置 提交代码前进行的操作
利用husky在代码提交之前触发git hook(git在客户端的钩子)然后执行pnpm run format来自动的格式化我们的代码。
安装husky
pnpm install -D husky执行npx husky-init 会在根目录下生成个一个.husky目录在这个目录下面会有一个pre-commit文件这个文件里面的命令在我们执行commit时执行。 前提是文件夹先git init 创建git追踪 在.husky/pre-commit文件添加如下命令
#!/usr/bin/env sh
. $(dirname -- $0)/_/husky.sh
pnpm run format配置commitlint 统一提交规范
利用commitlint统一commit信息的规范
pnpm add commitlint/config-conventional commitlint/cli -D添加配置文件新建commitlint.config.cjs(注意是cjs)然后添加下面的代码
module.exports {extends: [commitlint/config-conventional],// 校验规则rules: {type-enum: [2,always,[feat,//新特性、新功能fix,//修改bugdocs,//文档修改style,//代码格式修改, 注意不是 css 修改refactor,//代码重构perf,//优化相关比如提升性能、体验test,//测试用例修改chore,//其他修改, 比如改变构建流程、或者增加依赖库、工具等revert,//回滚到上一个版本build,//编译相关的修改例如发布版本、对项目构建或者依赖的改动],],type-case: [0],type-empty: [0],scope-empty: [0],scope-case: [0],subject-full-stop: [0, never],subject-case: [0, never],header-max-length: [0, always, 72],},
}在package.json中配置scripts命令
# 在scrips中添加下面的代码
{
scripts: {commitlint: commitlint --config commitlint.config.cjs -e -V},
}配置husky
npx husky add .husky/commit-msg 在生成的commit-msg文件中添加下面的命令
#!/usr/bin/env sh
. $(dirname -- $0)/_/husky.sh
pnpm commitlint当 commit 提交信息时必须是git commit -m type: xxx 符合类型的才可以需要注意的是类型的后面需要用英文的 :并且冒号后面是需要空一格的这个是不能省略的
3.项目集成
3.1 集成element-plus ui组件库
安装命令
# element-plus/icons-vue 为element-plus提供的图标组件库
pnpm install element-plus element-plus/icons-vue在main.ts入口文件引入element-plus ui组件库插件
import { createApp } from vue;
import App from ./App.vue;//引入element-plus插件与样式
import ElementPlus from element-plus;
import element-plus/dist/index.css;//获取应用实例对象
const app createApp(App)//安装ElementPlus插件
app.use(ElementPlus);app.mount(#app);全局配置国际化在main.ts入口添加
// 以下的import会有波浪线在build打包的时候会报错所以添加ts-ignore忽略当前文件ts类型的检测
//ts-ignore
import zhCn from element-plus/dist/locale/zh-cn.mjs
app.use(ElementPlus, {locale: zhCn
})3.2 src文件夹别名配置
在正常项目下文件的结构非常复杂。为了寻找文件简单可以给src文件夹设置别名。利用src文件夹的别名每次从src开始。
// vite.config.ts
import {defineConfig} from vite
import vue from vitejs/plugin-vue
import path from path
export default defineConfig({plugins: [vue()],resolve: {alias: {: path.resolve(./src) // 相对路径别名配置使用 代替 src}}
})TypeScript 编译配置
// tsconfig.json
{compilerOptions: {baseUrl: ./, // 解析非相对模块的基地址默认是当前目录paths: { //路径映射/*: [src/*] }}
}在使用别名引入文件时可能会有红色波浪线。这是因为vs code的Vetur插件对vue3兼容性不是太好可以使用vue language feature替换 3.3 环境变量的配置
开发环境development开发使用的环境每位开发人员在自己的dev分支上干活开发到一定程度同事会合并代码进行联调。测试环境testing测试同事干活的环境一般会由测试同事自己来部署然后在此环境进行测试。生产环境production生产环境是指正式提供对外服务的一般会关掉错误报告打开错误日志。(正式提供给客户使用的环境。)
注意:一般情况下一个环境对应一台服务器。
项目根目录分别添加 开发、生产和测试环境的文件。
.env.development
.env.production
.env.test配置环境变量
// .env.development
// 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV development
VITE_APP_TITLE 后台管理系统
VITE_APP_BASE_API /dev-api// .env.production
NODE_ENV production
VITE_APP_TITLE 后台管理系统
VITE_APP_BASE_API /prod-api通过import.meta.env获取环境变量 我这里可以打印但是波浪线报错 没有env属性 配置运行命令package.json scripts: {dev: vite --open,build:pro: vue-tsc vite build --mode production,},3.4 SVG图标配置
在开发项目的时候经常会用到svg矢量图对页面性能有很大的提升。而且SVG文件比img要小的很多放在项目中几乎不占用资源。
安装SVG管理插件
预加载 在项目运行时就生成所有图标,只需操作一次 dom高性能 内置缓存,仅当文件被修改时才会重新生成
pnpm install vite-plugin-svg-icons -D在vite.config.ts中配置插件
//引入svg需要用到插件
import { createSvgIconsPlugin } from vite-plugin-svg-icons
import path from path
export default () {return {plugins: [// .....createSvgIconsPlugin({// svg图标的存储位置iconDirs: [path.resolve(process.cwd(), src/assets/icons)],// Specify symbolId formatsymbolId: icon-[dir]-[name],}),],}
}入口文件导入
import virtual:svg-icons-register测试在vue文件中使用svg
// svg 标签相当于容器 use表示使用svg图标xlink:href的属性值标识执行哪一个图标 #icon-xxx 这里的xxx是svg的图标名。fill属性表示填充的颜色。
// 这里不用引入会去配置的src/assets/icons下找文件。svg //svg的width和height属性可以调节图标的大小use xlink:href#icon-phone fillred/use/svg
