网站跟别的做的一样的,wordpress中文seo插件,长沙简单的网站建设公司,广州外贸网站咨询项目管理后台 建立项目最好是卸载Vetur 新建.env.d.ts文件安装Eslint安装校验忽略文件添加运行脚本 安装prettier新建.prettierrc.json添加规则新建.prettierignore忽略文件 安装配置stylelint新建.stylelintrc.cjs 添加后的运行脚本配置husky配置commitlint配置husky 强制使用… 项目管理后台 建立项目最好是卸载Vetur 新建.env.d.ts文件安装Eslint安装校验忽略文件添加运行脚本 安装prettier新建.prettierrc.json添加规则新建.prettierignore忽略文件 安装配置stylelint新建.stylelintrc.cjs 添加后的运行脚本配置husky配置commitlint配置husky 强制使用pnpm包管理器工具配置命令 集成element-plusbutton的icon使用不生效的问题使用多个icon有报错-解决思路 国际化配置国际化配置有可能造成打包失败 src别名的配置环境变量的配置SVG图标的配置全局配置svg 全局组件集成sass设置项目清除默认样式文件设置全局样式文件设置全局scss样式变量文件 建立项目
pnpm安装npm i -g pnpm项目建立pnpm create vite项目初始化pnpm i项目运行pnpm run dev
最好是卸载Vetur
新建.env.d.ts文件
解决导入./App.vue 的报错
/// reference typesvite/client /
declare module *.vue {import type { DefineComponent } from vueconst vueComponent: DefineComponent{}, {}, anyexport default vueComponent
}安装Eslint 保证代码质量 pnpm i eslint -D 加载eslint的文档 会自动产生.eslintrc.cjs文件 安装相关校验设置pnpm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier eslint-plugin-node babel/eslint-parser
安装校验忽略文件
.eslintignore文件
添加运行脚本
package.json添加运行脚本通过pnpm run lint去检测语法如果出现不规范格式,通过pnpm run fix 修改
安装prettier
保证代码美观安装pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier
新建.prettierrc.json添加规则
{singleQuote: true,semi: false,bracketSpacing: true,htmlWhitespaceSensitivity: ignore,endOfLine: auto,trailingComma: all,tabWidth: 2
}新建.prettierignore忽略文件
/dist/*
/html/*
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*安装配置stylelint
可格式化css代码检查css语法错误与不合理的写法指定css书写顺序使用sass
pnpm add sass sass-loader stylelint postcss postcss-scss postcss-html stylelint-config-prettier stylelint-config-recess-order stylelint-config-recommended-scss stylelint-config-standard stylelint-config-standard-vue stylelint-scss stylelint-order stylelint-config-standard-scss -D新建.stylelintrc.cjs
官网:https://stylelint.bootcss.com/
module.exports {extends: [stylelint-config-standard, // 配置stylelint拓展插件stylelint-config-html/vue, // 配置 vue 中 template 样式格式化stylelint-config-standard-scss, // 配置stylelint scss插件stylelint-config-recommended-vue/scss, // 配置 vue 中 scss 样式格式化stylelint-config-recess-order, // 配置stylelint css属性书写顺序插件,stylelint-config-prettier, // 配置stylelint和prettier兼容],overrides: [{files: [**/*.(scss|css|vue|html)],customSyntax: postcss-scss,},{files: [**/*.(html|vue)],customSyntax: postcss-html,},],ignoreFiles: [**/*.js,**/*.jsx,**/*.tsx,**/*.ts,**/*.json,**/*.md,**/*.yaml,],/*** null 关闭该规则* always 必须*/rules: {value-keyword-case: null, // 在 css 中使用 v-bind不报错no-descending-specificity: null, // 禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器function-url-quotes: always, // 要求或禁止 URL 的引号 always(必须加上引号)|never(没有引号)no-empty-source: null, // 关闭禁止空源码selector-class-pattern: null, // 关闭强制选择器类名的格式property-no-unknown: null, // 禁止未知的属性(true 为不允许)block-opening-brace-space-before: always, //大括号之前必须有一个空格或不能有空白符value-no-vendor-prefix: null, // 关闭 属性值前缀 --webkit-boxproperty-no-vendor-prefix: null, // 关闭 属性前缀 -webkit-maskselector-pseudo-class-no-unknown: [// 不允许未知的选择器true,{ignorePseudoClasses: [global, v-deep, deep], // 忽略属性修改element默认样式的时候能使用到},],},
}添加后的运行脚本
运行format可以更新{}里的代码包括css
scripts: {dev: vite --open,build: vue-tsc vite build,preview: vite preview,lint: eslint src,fix: eslint src --fix,format: prettier --write \./**/*.{html,vue,ts,js,json,md}\,lint:eslint: eslint src/**/*.{ts,vue} --cache --fix,lint:style: stylelint src/**/*.{css,scss,vue} --cache --fix},配置husky
多人开发时可以强制让开发人员再代码提交之前触发git hook客户端的钩子注意需要有代码仓库然后自动执行pnpm run format来格式化我们的代码安装huskypnpm install -D husky执行npx husky-init自动生成.husky目录在这个目录下面会有一个pre-commit文件这个文件里面的命令在我们执行commit的时候就会执行写入之前写的格式化命令
配置commitlint
对于代码的提交commit信息也是有统一规范不能随便写让每个人按照规范写入实现安装pnpm add commitlint/config-conventional commitlint/cli -D新建commitlint.config.cjs
module.exports {extends: [commitlint/config-conventional],// 校验规则rules: {type-enum: [2,always,[feat,fix,docs,style,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 执行完多出一个文件添加pnpm commitlint指令 当我们 commit 提交信息时就不能再随意写了必须是 git commit -m ‘fix: xxx’ 符合类型的才可以需要注意的是类型的后面需要用英文的 :并且冒号后面是需要空一格的这个是不能省略的
feat,//新特性、新功能
fix,//修改bug
docs,//文档修改
style,//代码格式修改, 注意不是 css 修改
refactor,//代码重构
perf,//优化相关比如提升性能、体验
test,//测试用例修改
chore,//其他修改, 比如改变构建流程、或者增加依赖库、工具等
revert,//回滚到上一个版本
build,//编译相关的修改例如发布版本、对项目构建或者依赖的改动强制使用pnpm包管理器工具
团队开发项目的时候需要统一包管理器工具因为不同包管理器工具下载同一个依赖,可能版本不一样创建scritps/preinstall.js文件
if (!/pnpm/.test(process.env.npm_execpath || )) {console.warn(\u001b[33mThis repository must using pnpm as the package manager for scripts to work properly.\u001b[39m\n,)process.exit(1)
}配置命令
scripts: {preinstall: node ./scritps/preinstall.js
}执行一下pnpm run preinstall当我们使用npm或者yarn来安装包的时候就会报错了原理就是在install的时候会触发preinstallnpm提供的生命周期钩子这个文件里面的代码
集成element-plus
vue3不能用element-UI需要用到element-plus安装pnpm install element-plus --savemain.ts里编辑
import { createApp } from vue
import ./style.css
// 引入element-plus插件
import ElementPlus from element-plus
import element-plus/dist/index.css
import App from ./App.vue
const app createApp(App)app.use(ElementPlus)
app.mount(#app)button的icon使用不生效的问题
安装 pnpm install element-plus/icons-vue
templatedivh1初始化项目/h1el-button typeprimary :iconEdit我是 ElButton编辑/el-button/div
/template
script setup langts
import { Edit } from element-plus/icons-vue
/scriptstyle scoped langsass/style使用多个icon有报错-解决思路 修改 tsconfig.json 文件然后重启一下
noUnusedLocals: false国际化配置
因为目前导入的是展示英文需要进行国际化配置成中文 main.ts中
import { createApp } from vue
import ./style.css
// 引入element-plus插件
import ElementPlus from element-plus
// 配置element-plus国际化
import zhCn from element-plus/es/locale/lang/zh-cn
import element-plus/dist/index.css
import App from ./App.vue
const app createApp(App)app.use(ElementPlus, {locale:zhCn
})
app.mount(#app)国际化配置有可能造成打包失败
原因是国际化配置没有ts支持需要忽略忽略当前文件ts类型的检测否则有红色提示(打包会失败)上面添加这个// ts-ignore
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}}
})// tsconfig.json
{compilerOptions: {baseUrl: ./, // 解析非相对模块的基地址默认是当前目录paths: { //路径映射相对于baseUrl/*: [src/*]}}
}环境变量的配置 项目开发经历开发环境测试环境和生产环境 为区分不同环境的不同接口请求可以环境变量配置让不同环境的切换交给代码自动判断 开发环境(development) 测试环境(testing) 生产环境(production)
//根目录新增三个文件
.env.development
.env.production
.env.testimport.meta.env可以直接获取不同环境的变量但变量必须是以VITE_开头暴露
NODE_ENV test
VITE_APP_TITLE 大宝藏
VITE_APP_BASE_API /test-apiSVG图标的配置
矢量图-提示页面加载性能安装pnpm install vite-plugin-svg-icons -D
template!-- Svg矢量图的封装 --div!-- svg:矢量外层容器 --svg :style{ width: width, height: height }use :xlink:hrefprefix name :fillcolor/use/svg/div
/templatescript setup langts
defineProps({//xlink:href属性值的前缀prefix: {type: String,default: #icon-,},//svg矢量图的名字name: String,//svg图标的颜色color: {type: String,default: ,},//svg宽度width: {type: String,default: 16px,},//svg高度height: {type: String,default: 16px,},
})
/script
style scoped/style代码使用
全局配置svg
main.ts里面
//Svg需要到的配置代码
import virtual:svg-icons-register
//全局配置svg组件
import mySvg from /components/Svg.vue
app.component(mySvg, mySvg)全局组件
按照上面一个组件引入一次组件多了有点麻烦所以建立全局组件对象新建文件styles/index.js
import mySvg from ./Svg.vue
import myCreatead from /components/createad.vue
//全局组件对象
const allGloablComponent {myCreatead,mySvg,
}
export default {// 必须叫install方法install(app) {//循环注册为全局对象Object.keys(allGloablComponent).forEach((key) {app.component(key, allGloablComponent[key])})},
}main.ts中挂载
//全局组件注册
import gloablComponent from /components
app.use(gloablComponent)集成sass
因为之前已经安装过sass
设置项目清除默认样式文件
先新建一个styles/reset.scss文件用来清除默认样式
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {display: block;
}
/* HTML5 hidden-attribute fix for newer browsers */
*[hidden] {display: none;
}
body {line-height: 1;
}
menu, ol, ul {list-style: none;
}
blockquote, q {quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {content: ;content: none;
}
table {border-collapse: collapse;border-spacing: 0;
}设置全局样式文件
再新建一个styles/index.scss,用来当全局样式文件引入清除默认文件
import ./reset.scss设置全局scss样式变量文件
新建styles/variable.scss
// 项目scss全局变量
// 项目主题变量
$base-color:#79cce2;
$color:red;vite.config.ts中配置全局样式变量文件 // vite.config.ts文件// scss全局变量css: {preprocessorOptions: {scss: {javascriptEnabled: true,additionalData: import ./src/styles/variable.scss;,},},},现在页面中就可以直接使用了
