做黑界头像网站,成考过来人的忠告,南昌网站怎么做seo,南昌网优化网站设计公司最近接触了前端代码#xff0c;作为一个后端#xff0c;能将其搭起来并用于生产#xff0c;我感到很是欣慰。
本文纯安装速记与关键点记录#xff0c;适合有一定经验且对前端React及生态有一些小了解#xff0c;想要快速的将一个框架搭建起来的童鞋。可当成一个指引。
N…最近接触了前端代码作为一个后端能将其搭起来并用于生产我感到很是欣慰。
本文纯安装速记与关键点记录适合有一定经验且对前端React及生态有一些小了解想要快速的将一个框架搭建起来的童鞋。可当成一个指引。
Node.js环境安装
本地搭建可支持多个Node.js版本切换的工具。这里笔者使用的工具是NVM。该工具支持多种操作系统目前以windoows为例来说明。 tip: NVM用于切换多个node版本比node要先安装后面node由nvm来安装。 NVM安装
进入官网http://nvm.uihtm.com/ 下载
解压下载双击安装
检查装情况, 在控制台输入 nvm version有版本输出即说明安装成功。
nvm version# ---
# Running version 1.1.10.tip: 安装之后会自动生成两个环墒变量: NVM_HOME和NVM_SYNLINK, 指定安装路径以及Node关联路径。 用nvm安装nodejs
# 查询可获得的版本列表
nvm list available # 安装指定版本的node
nvm install node16
nvm install node18
nvm install node2?注意事项 一定要先安装nvm如果后端版本切换会不成功请多试几次比如卸掉node重来一遍。
常用功能
列出在用版本
nvm list # 带*号和Currently ...)为当前在用nodejs
# 控制台输出
# 18.18.0
# * 16.20.2 (Currently using 64-bit executable)
# 14.21.3 版本切换
nvm use 16# 切换到第 16版前端框架速搭
起步: node pnpm yarn
# 工具npm i -g pnpm yarn typescirpt
pnpm create vite my-react-app --template react-ts
cd my-react-app
pnpm install笔记最爱yarn目前pnpm性能高出好几倍所以两个会一起用。
必备组件
安装
#ant-design
pnpm add antd ant-design/icons### atailwind css
pnpm add -D tailwindcss postcss autoprefixer
npx tailwindcss init ##
pnpm i crypto-js
pnpm i axios
pnpm i react-redux react-router-dom ## 优化器与path
pnpm i vite-plugin-optimizer path -D## 改变控制台颜色 -- 用于vitePluginStart.ts插件-在控制打印输出Ascii图
pnpm i picocolors
配置-tailwind.config.js
/** type {import(tailwindcss).Config} */module.exports {content: [./index.html,./src/**/*.{html,js,ts,jsx,tsx}],theme: {screens: {xs: 457px,sm: 480px,md: 768px,lg: 976px,xl: 1440px,},colors:{transparent: transparent,current: currentColor,dark: rgba(0, 0, 0, 0.88),primaryColor: #13ce66,white: #ffffff,blue: #1fb6ff,purple: #7e5bef,pink: #ff49db,orange: #ff7849,green: #13ce66,yellow: #ffc82c,gray-dark: #273444,gray: #8492a6,gray: #8495ff,gray-light: #d3dce6,},fontFamily: {sans: [Graphik, sans-serif],serif: [Merriweather, serif],},extend: {borderColor: #c2c8d1,spacing: {128: 32rem,144: 36rem,},borderRadius: {4xl: 2rem,}},},plugins: [],
}配置index.css
tailwind base;
tailwind components;
tailwind utilities;# extra 内容:root {--border-color: #c2c8d1;--primary-color: #13ce66
}/* pc 宽度大于1200px */
media screen and (min-width: 1200px){}/* 平板 小于1199 大于501px*/
media screen and (max-width: 1199px) and (min-width: 501px) {}/* 手机 最大500px*/
media screen and (max-width: 500px) {}.border-solid {border: 1px solid var(--border-color);
}
.border-radius {border-radius: 20px;
}.border-right {border: 1px solid var(--border-color);
}
创建plugin vitePluginStart.ts import type { PluginOption, ViteDevServer } from vite;
import colors from picocolors;export default function vitePluginVueMonitor (): PluginOption {return {name: ts-start,apply: serve,enforce: pre,configureServer(server: ViteDevServer) {const print server.printUrls;server.printUrls () {const network server.resolvedUrls?.network[0];const local server.resolvedUrls?.local[0];if (!network !local) {console.log(colors.red(获取IP地址失败,请检查vite.config.ts文件中server.host配置是否正确!\n))} else {console.info(colors.green(Hello World))print();}}}}
}配置vite.config
import react from vitejs/plugin-react
import { defineConfig } from vite
import path from path;
import optimizer from vite-plugin-optimizer// # 控制台输出
// 注意这里千万不要使用因为这里还不能识别你配置文件系统路径别名
import vitePluginStart from ./src/plugin/vitePluginStart.tsexport default defineConfig({plugins: [react(),optimizer({child_process: () ({find: /^(node:)?child_process$/,code: const child_process import.meta.glob(child_process); export { child_process as default }})}),vitePluginStart(),],resolve: {alias: {: path.resolve(__dirname, src),assets: path.join(__dirname, src/assets),}},server: {host: 0.0.0.0, // 指定服务器应该监听哪个 IP 地址port: 5173, // 指定开发服务器端口strictPort: true, // 若端口已被占用则会直接退出open: false, // 启动时自动在浏览器中打开应用程序}
})配置 tsconfig.json
{compilerOptions: {target: ES2020,useDefineForClassFields: true,lib: [ES2020, DOM, DOM.Iterable,WebWorker],module: ESNext,skipLibCheck: true,/* Bundler mode */moduleResolution: bundler,allowImportingTsExtensions: true,resolveJsonModule: true,isolatedModules: true,noEmit: true,jsx: react-jsx,/* Linting */strict: true,noUnusedLocals: false,noUnusedParameters: false,noFallthroughCasesInSwitch: true,allowSyntheticDefaultImports: true,noImplicitAny: false,baseUrl: ./,paths: {/*: [src/*]},types: [vite/client, jest, testing-library/jest-dom]},include: [src],references: [{ path: ./tsconfig.node.json }]
}配置 .gitignore
.DS_Store
node_modules
dist
.npmrc
.cacheyarn.lock
package-lock.jsontests/server/static
tests/server/static/upload
test/unit/coverage
test/e2e/reports.local
# local env files
.env.local
.env.*.local
.eslintcache# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
selenium-debug.log
pnpm-debug.log*# Editor directories and files
.idea
# .vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?修改 App.tsx
去掉app.css
import React from react
import {ConfigProvider} from antd;function App() {return (ConfigProvidertheme{{token: {colorPrimary: #13ce66,colorBorderSecondary: #c2c8d1,colorBgContainer: rgba(246,255,237,0),},}}button className{bg-gray} onClick{(){alert(hello world)}}click me/button/ConfigProvider/)
}export default App启动框架测试效果
pnpm start代码规范组件 - eslint prettier husky eslint (https://github.com/eslint/eslint) JavaScript 代码检测工具检测并提示错误或警告信息prettier (https://github.com/prettier/prettier) 代码自动化格式化工具更好的代码风格效果husky (https://github.com/typicode/husky) Git hooks 工具, 可以在执行 git 命令时执行自定义的脚本程序 安装
# eslint -- .eslintrc.cjs
pnpm add -D eslint eslint-config-react-app
npm init eslint/config# Prettier prettier 是一个代码格式化工具 - prettierrc.cjs
pnpm add -D prettier eslint-config-prettier trivago/prettier-plugin-sort-imports eslint-plugin-prettier# 创建配置文件 -- 配置后谈
npm init eslint/config
touch .eslintrc.cjs
touch .prettierrc.cjs# husky
pnpm add -D husky
pnpm pkg set scripts.preparehusky install
git init
pnpm prepare
npx husky add .husky/pre-commit npm run lint配置 .eslintrc.cjs – eslint
添加.eslintrc.cjs文件
module.exports {extends: [react-app, prettier],
};
配置.prettierrc.cjs
创建.prettierrc.cjs
module.exports {singleQuote: true,importOrder: [^vite,^react,^antd,THIRD_PARTY_MODULES,components/,pages/,hooks/,utils/,^[./],],importOrderSortSpecifiers: true,importOrderGroupNamespaceSpecifiers: true,importOrderCaseInsensitive: true
};测试
git add .
git commit -m test husky工程测试
pnpm devWebAssembly - 可选
mkdir assembly
cd assembly见笔者的另外文章 [Emscripten编译c/c为WebAssembly]https://juejin.cn/post/7285538670608810043)
