迅速百度网站自然排名,网站建设的过程有哪些,网站建设一般分为几个步骤,高端网站设计企业网站建设此教程来自于尚硅谷 文章目录 **此教程来自于尚硅谷**硅谷甄选运营平台一、搭建后台管理系统模板1.1项目初始化1.1.1环境准备1.1.2初始化项目 1.2项目配置一、eslint配置1.1vue3环境代码校验插件1.2修改.eslintrc.cjs配置文件1.3.eslintignore忽略文件1.4运行脚本 二、配置**pr…此教程来自于尚硅谷 文章目录 **此教程来自于尚硅谷**硅谷甄选运营平台一、搭建后台管理系统模板1.1项目初始化1.1.1环境准备1.1.2初始化项目 1.2项目配置一、eslint配置1.1vue3环境代码校验插件1.2修改.eslintrc.cjs配置文件1.3.eslintignore忽略文件1.4运行脚本 二、配置**prettier**2.1安装依赖包2.2.prettierrc.json添加规则2.3.prettierignore忽略文件 三、配置stylelint3.1.stylelintrc.cjs**配置文件**3.2.stylelintignore忽略文件3.3运行脚本 四、配置husky五、配置commitlint六、强制使用pnpm包管理器工具 三、项目集成3.1集成element-plus3.2src别名的配置3.3环境变量的配置3.4SVG图标配置3.4.1svg 封装为全局组件 3.5集成sass3.6mock数据3.7axios二次封装3.8API接口统一管理 四、项目的资源地址 硅谷甄选运营平台
此次教学课程为硅谷甄选运营平台项目,包含运营平台项目模板从 0 到 1 开发以及数据大屏幕、权限等业务。
此次教学课程涉及到技术栈包含 : vue3TypeScriptvue-routerpiniaelement-plusaxiosecharts 等技术栈。
一、搭建后台管理系统模板
1.1项目初始化
今天来带大家从0开始搭建一个vue3版本的后台管理系统。一个项目要有统一的规范需要使用eslintstylelintprettier来对我们的代码质量做检测和修复需要使用husky来做commit拦截需要使用commitlint来统一提交规范需要使用preinstall来统一包管理工具。
下面我们就用这一套规范来初始化我们的项目集成一个规范的模版。
1.1.1环境准备
node v16.14.2pnpm 8.0.0
1.1.2初始化项目
本项目使用vite进行构建vite官方中文文档参考cn.vitejs.dev/guide/
pnpm:performant npm 意味“高性能的 npm”。pnpm由npm/yarn衍生而来解决了npm/yarn内部潜在的bug极大的优化了性能扩展了使用场景。被誉为“最先进的包管理工具”
pnpm安装指令
npm i -g pnpm项目初始化命令:
pnpm create vite进入到项目根目录pnpm install安装全部依赖.安装完依赖运行程序:pnpm run dev
运行完毕项目跑在http://127.0.0.1:5173/,可以访问你得项目啦
1.2项目配置
一、eslint配置
eslint中文官网:http://eslint.cn/
ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具
首先安装eslint
pnpm i eslint -D生成配置文件:.eslint.cjs
npx eslint --init.eslint.cjs配置文件
module.exports {//运行环境env: { browser: true,//浏览器端es2021: true,//es2021},//规则继承extends: [ //全部规则默认是关闭的,这个配置项开启推荐规则,推荐规则参照文档//比如:函数不能重名、对象不能出现重复keyeslint:recommended,//vue3语法规则plugin:vue/vue3-essential,//ts语法规则plugin:typescript-eslint/recommended],//要为特定类型的文件指定处理器overrides: [],//指定解析器:解析器//Esprima 默认解析器//Babel-ESLint babel解析器//typescript-eslint/parser ts解析器parser: typescript-eslint/parser,//指定解析器选项parserOptions: {ecmaVersion: latest,//校验ECMA最新版本sourceType: module//设置为script默认或者module代码在ECMAScript模块中},//ESLint支持使用第三方插件。在使用插件之前您必须使用npm安装它//该eslint-plugin-前缀可以从插件名称被省略plugins: [vue,typescript-eslint],//eslint规则rules: {}
} 1.1vue3环境代码校验插件
# 让所有与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-parser1.2修改.eslintrc.cjs配置文件
// see https://eslint.bootcss.com/docs/rules/module.exports {env: {browser: true,es2021: true,node: true,jest: true,},/* 指定如何解析语法 */parser: vue-eslint-parser,/** 优先级低于 parse 的语法解析配置 */parserOptions: {ecmaVersion: latest,sourceType: module,parser: typescript-eslint/parser,jsxPragma: React,ecmaFeatures: {jsx: true,},},/* 继承已有的规则 */extends: [eslint:recommended,plugin:vue/vue3-essential,plugin:typescript-eslint/recommended,plugin:prettier/recommended,],plugins: [vue, typescript-eslint],/** off 或 0 关闭规则* warn 或 1 打开的规则作为警告不影响代码执行* error 或 2 规则作为一个错误代码不能执行界面报错*/rules: {// eslinthttps://eslint.bootcss.com/docs/rules/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, // 对模板中的自定义组件强制执行属性命名样式},
}
1.3.eslintignore忽略文件
dist
node_modules1.4运行脚本
package.json新增两个运行脚本
scripts: {lint: eslint src,fix: eslint src --fix,
}二、配置prettier
有了eslint为什么还要有prettiereslint针对的是javascript他是一个检测工具包含js语法以及少部分格式问题在eslint看来语法对了就能保证代码正常运行格式问题属于其次
而prettier属于格式化工具它看不惯格式不统一所以它就把eslint没干好的事接着干另外prettier支持
包含js在内的多种语言。
总结起来eslint和prettier这俩兄弟一个保证js代码质量一个保证代码美观。
2.1安装依赖包
pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier2.2.prettierrc.json添加规则
{singleQuote: true,semi: false,bracketSpacing: true,htmlWhitespaceSensitivity: ignore,endOfLine: auto,trailingComma: all,tabWidth: 2
}2.3.prettierignore忽略文件
/dist/*
/html/*
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*通过pnpm run lint去检测语法如果出现不规范格式,通过pnpm run fix 修改
三、配置stylelint
stylelint为css的lint工具。可格式化css代码检查css语法错误与不合理的写法指定css书写顺序等。
我们的项目中使用scss作为预处理器安装以下依赖
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 -D3.1.stylelintrc.cjs配置文件
官网:https://stylelint.bootcss.com/
// see 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默认样式的时候能使用到},],},
}3.2.stylelintignore忽略文件
/node_modules/*
/dist/*
/html/*
/public/*3.3运行脚本
scripts: {lint:style: stylelint src/**/*.{css,scss,vue} --cache --fix
}最后配置统一的prettier来格式化我们的js和csshtml代码 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},当我们运行pnpm run format的时候会把代码直接格式化
四、配置husky
在上面我们已经集成好了我们代码校验工具但是需要每次手动的去执行命令才会格式化我们的代码。如果有人没有格式化就提交了远程仓库中那这个规范就没什么用。所以我们需要强制让开发人员按照代码规范来提交。
要做到这件事情就需要利用husky在代码提交之前触发git hook(git在客户端的钩子)然后执行pnpm run format来自动的格式化我们的代码。
安装husky
pnpm install -D husky执行
npx husky-init会在根目录下生成个一个.husky目录在这个目录下面会有一个pre-commit文件这个文件里面的命令在我们执行commit的时候就会执行
在.husky/pre-commit文件添加如下命令
#!/usr/bin/env sh
. $(dirname -- $0)/_/husky.sh
pnpm run format当我们对代码进行commit操作的时候就会执行命令对代码进行格式化然后再提交。
五、配置commitlint
对于我们的commit信息也是有统一规范的不能随便写,要让每个人都按照统一的标准来执行我们可以利用commitlint来实现。
安装包
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,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},
}配置结束现在当我们填写commit信息的时候前面就需要带着下面的subject
feat,//新特性、新功能
fix,//修改bug
docs,//文档修改
style,//代码格式修改, 注意不是 css 修改
refactor,//代码重构
perf,//优化相关比如提升性能、体验
test,//测试用例修改
chore,//其他修改, 比如改变构建流程、或者增加依赖库、工具等
revert,//回滚到上一个版本
build,//编译相关的修改例如发布版本、对项目构建或者依赖的改动配置husky
npx husky add .husky/commit-msg 在生成的commit-msg文件中添加下面的命令
#!/usr/bin/env sh
. $(dirname -- $0)/_/husky.sh
pnpm commitlint当我们 commit 提交信息时就不能再随意写了必须是 git commit -m ‘fix: xxx’ 符合类型的才可以需要注意的是类型的后面需要用英文的 :并且冒号后面是需要空一格的这个是不能省略的
六、强制使用pnpm包管理器工具
团队开发项目的时候需要统一包管理器工具,因为不同包管理器工具下载同一个依赖,可能版本不一样,
导致项目出现bug问题,因此包管理器工具需要统一管理
在根目录创建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 ./scripts/preinstall.js
}当我们使用npm或者yarn来安装包的时候就会报错了。原理就是在install的时候会触发preinstallnpm提供的生命周期钩子这个文件里面的代码。
三、项目集成
3.1集成element-plus
硅谷甄选运营平台,UI组件库采用的element-plus因此需要集成element-plus插件
官网地址:https://element-plus.gitee.io/zh-CN/
pnpm install element-plus element-plus/icons-vue入口文件main.ts全局安装element-plus,element-plus默认支持语言英语设置为中文
import ElementPlus from element-plus;
import element-plus/dist/index.css
//ts-ignore忽略当前文件ts类型的检测否则有红色提示(打包会失败)
import zhCn from element-plus/dist/locale/zh-cn.mjs
app.use(ElementPlus, {locale: zhCn
})Element Plus全局组件类型声明
// tsconfig.json
{compilerOptions: {// ...types: [element-plus/global]}
}配置完毕可以测试element-plus组件与图标的使用.
3.2src别名的配置
在开发项目的时候文件与文件关系可能很复杂因此我们需要给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: { //路径映射相对于baseUrl/*: [src/*] }}
}3.3环境变量的配置
项目开发过程中至少会经历开发环境、测试环境和生产环境(即正式环境)三个阶段。不同阶段请求的状态(如接口地址等)不尽相同若手动切换接口地址是相当繁琐且易出错的。于是环境变量配置的需求就应运而生我们只需做简单的配置把环境状态切换的工作交给代码。
开发环境development 顾名思义开发使用的环境每位开发人员在自己的dev分支上干活开发到一定程度同事会合并代码进行联调。
测试环境testing 测试同事干活的环境啦一般会由测试同事自己来部署然后在此环境进行测试
生产环境production 生产环境是指正式提供对外服务的一般会关掉错误报告打开错误日志。(正式提供给客户使用的环境。)
注意:一般情况下一个环境对应一台服务器,也有的公司开发与测试环境是一台服务器
项目根目录分别添加 开发、生产和测试环境的文件!
.env.development
.env.production
.env.test文件内容
# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV development
VITE_APP_TITLE 硅谷甄选运营平台
VITE_APP_BASE_API /dev-apiNODE_ENV production
VITE_APP_TITLE 硅谷甄选运营平台
VITE_APP_BASE_API /prod-api# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV test
VITE_APP_TITLE 硅谷甄选运营平台
VITE_APP_BASE_API /test-api配置运行命令package.json scripts: {dev: vite --open,build:test: vue-tsc vite build --mode test,build:pro: vue-tsc vite build --mode production,preview: vite preview},通过import.meta.env获取环境变量
3.4SVG图标配置
在开发项目的时候经常会用到svg矢量图,而且我们使用SVG以后页面上加载的不再是图片资源,
这对页面性能来说是个很大的提升而且我们SVG文件比img要小的很多放在项目中几乎不占用资源。
安装SVG依赖插件
pnpm install vite-plugin-svg-icons -D在vite.config.ts中配置插件
import { createSvgIconsPlugin } from vite-plugin-svg-icons
import path from path
export default () {return {plugins: [createSvgIconsPlugin({// Specify the icon folder to be cachediconDirs: [path.resolve(process.cwd(), src/assets/icons)],// Specify symbolId formatsymbolId: icon-[dir]-[name],}),],}
}入口文件导入
import virtual:svg-icons-register3.4.1svg 封装为全局组件
因为项目很多模块需要使用图标,因此把它封装为全局组件
在src/components目录下创建一个SvgIcon组件:代表如下
templatedivsvg :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在src文件夹目录下创建一个index.ts文件用于注册components文件夹内部全部全局组件
import SvgIcon from ./SvgIcon/index.vue;
import type { App, Component } from vue;
const components: { [name: string]: Component } { SvgIcon };
export default {install(app: App) {Object.keys(components).forEach((key: string) {app.component(key, components[key]);})}
}在入口文件引入src/index.ts文件,通过app.use方法安装自定义插件
import gloablComponent from ./components/index;
app.use(gloablComponent);3.5集成sass
我们目前在组件内部已经可以使用scss样式,因为在配置styleLint工具的时候项目当中已经安装过sass sass-loader,因此我们再组件内可以使用scss语法需要加上lang“scss”
style scoped langscss/style接下来我们为项目添加一些全局的样式
在src/styles目录下创建一个index.scss文件当然项目中需要用到清除默认样式因此在index.scss引入reset.scss
import reset.scss在入口文件引入
import /styles但是你会发现在src/styles/index.scss全局样式文件中没有办法使用 变 量 . 因 此 需 要 给 项 目 中 引 入 全 局 变 量 变量.因此需要给项目中引入全局变量 变量.因此需要给项目中引入全局变量.
在style/variable.scss创建一个variable.scss文件
在vite.config.ts文件配置如下:
export default defineConfig((config) {css: {preprocessorOptions: {scss: {javascriptEnabled: true,additionalData: import ./src/styles/variable.scss;,},},},}
}import ./src/styles/variable.less;后面的;不要忘记不然会报错!
配置完毕你会发现scss提供这些全局变量可以在组件样式中使用了
3.6mock数据
安装依赖:https://www.npmjs.com/package/vite-plugin-mock
pnpm install -D vite-plugin-mock mockjs在 vite.config.js 配置文件启用插件。
import { UserConfigExport, ConfigEnv } from vite
import { viteMockServe } from vite-plugin-mock
import vue from vitejs/plugin-vue
export default ({ command }) {return {plugins: [vue(),viteMockServe({localEnabled: command serve,}),],}
}在根目录创建mock文件夹:去创建我们需要mock数据与接口
在mock文件夹内部创建一个user.ts文件
//用户信息数据
function createUserList() {return [{userId: 1,avatar:https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif,username: admin,password: 111111,desc: 平台管理员,roles: [平台管理员],buttons: [cuser.detail],routes: [home],token: Admin Token,},{userId: 2,avatar:https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif,username: system,password: 111111,desc: 系统管理员,roles: [系统管理员],buttons: [cuser.detail, cuser.user],routes: [home],token: System Token,},]
}export default [// 用户登录接口{url: /api/user/login,//请求地址method: post,//请求方式response: ({ body }) {//获取请求体携带过来的用户名与密码const { username, password } body;//调用获取用户信息函数,用于判断是否有此用户const checkUser createUserList().find((item) item.username username item.password password,)//没有用户返回失败信息if (!checkUser) {return { code: 201, data: { message: 账号或者密码不正确 } }}//如果有返回成功信息const { token } checkUserreturn { code: 200, data: { token } }},},// 获取用户信息{url: /api/user/info,method: get,response: (request) {//获取请求头携带tokenconst token request.headers.token;//查看用户信息是否包含有次token用户const checkUser createUserList().find((item) item.token token)//没有返回失败的信息if (!checkUser) {return { code: 201, data: { message: 获取用户信息失败 } }}//如果有返回成功信息return { code: 200, data: {checkUser} }},},
]安装axios
pnpm install axios最后通过axios测试接口
3.7axios二次封装
在开发项目的时候避免不了与后端进行交互,因此我们需要使用axios插件实现发送网络请求。在开发项目的时候
我们经常会把axios进行二次封装。
目的:
1:使用请求拦截器可以在请求拦截器中处理一些业务(开始进度条、请求头携带公共参数)
2:使用响应拦截器可以在响应拦截器中处理一些业务(进度条结束、简化服务器返回的数据、处理http网络错误)
在根目录下创建utils/request.ts
import axios from axios;
import { ElMessage } from element-plus;
//创建axios实例
let request axios.create({baseURL: import.meta.env.VITE_APP_BASE_API,timeout: 5000
})
//请求拦截器
request.interceptors.request.use(config {return config;
});
//响应拦截器
request.interceptors.response.use((response) {return response.data;
}, (error) {//处理网络错误let msg ;let status error.response.status;switch (status) {case 401:msg token过期;break;case 403:msg 无权访问;break;case 404:msg 请求地址错误;break;case 500:msg 服务器出现问题;break;default:msg 无网络;}ElMessage({type: error,message: msg})return Promise.reject(error);
});
export default request;3.8API接口统一管理
在开发项目的时候,接口可能很多需要统一管理。在src目录下去创建api文件夹去统一管理项目的接口
比如:下面方式
//统一管理咱们项目用户相关的接口import request from /utils/requestimport type {loginFormData,loginResponseData,userInfoReponseData,} from ./type//项目用户相关的请求地址enum API {LOGIN_URL /admin/acl/index/login,USERINFO_URL /admin/acl/index/info,LOGOUT_URL /admin/acl/index/logout,}
//登录接口
export const reqLogin (data: loginFormData) request.postany, loginResponseData(API.LOGIN_URL, data)
//获取用户信息export const reqUserInfo () request.getany, userInfoReponseData(API.USERINFO_URL)//退出登录export const reqLogout () request.postany, any(API.LOGOUT_URL)四、项目的资源地址
贾成豪老师代码仓库地址:https://gitee.com/jch1011/vue3_admin_template-bj1.git
项目在线文档:
服务器域名:http://sph-api.atguigu.cn
swagger文档:
http://139.198.104.58:8209/swagger-ui.html
http://139.198.104.58:8212/swagger-ui.html#/
echarts:国内镜像网站
https://www.isqqw.com/echarts-doc/zh/option.html#title
http://datav.aliyun.com/portal/school/atlas/area_selector
