如何从0-1搭建前端项目第一步前端开发技术选型开发框架：vue / react Vue的优缺点 Vue的架构比较灵活

前期准备

1.node环境安装

去官网下载：Node.js — 在任何地方运行 JavaScript

2.一镜到底安装(Next)

3.找到文件路径新建两个文件夹：node_global、node_cache如图

4.配置环境变量

微信图片_20250105101734.png

5.配置系统变量

点击下方系统变量新建

新建完成后找到系统变量里面的Path

如图新建

6.配置用户变量

配置完系统变量后配置用户变量，新建同上，最终效果如图选中

然后同上在用户变量找到Path然后添加如图选中的变量

保存配置完成，Win+R打开命令窗口输入cmd再输入node -v和npm -v如图则证明变量配置成功

第一步前端开发技术选型

开发框架：vue / react

Vue的优缺点

Vue的架构比较灵活，他的基础框架完全可以满足中小型项目的开发，复杂内容亦可以搭配Vuex、Vue Router 等完成。
Vue 支持双向数据绑定，特别是在表单和输入数据时。
Vue 的文档清晰且易懂，教程和社区资源丰富，对于新手来说尤其友好。
Vue 有 Vuex（状态管理）和 Vue Router（路由管理），这些官方库支持与 Vue 紧密结合，提供了稳定的解决方案。

对于非常复杂的应用，Vue 的灵活性可能导致项目结构管理的复杂性。

React的优缺点

React 使用虚拟DOM，优化了页面更新的性能。当组件的状态发生变化时，React 会先更新虚拟DOM，再与真实DOM进行对比，从而进行高效的更新。
React 对 TypeScript 的支持非常好，TypeScript 能帮助提高开发效率和减少错误。

React 对新手来说可能较为复杂，特别是对于组件生命周期、状态管理（如 Redux）等概念的理解上有一定的挑战。
React 本身只关注构建UI，很多功能需要依赖其他库来补充（如 React Router, Redux 等）

打包工具的选择：vite/webpack

特性	Vite	Webpack
启动速度	极快，基于 ES 模块按需加载	较慢，需要构建整个项目
构建速度	极快，使用 ESBuild 进行高速构建	较慢，构建过程中需要更多的资源
配置复杂度	简单，开箱即用	复杂，适用于需要高定制化的项目
支持的浏览器	现代浏览器	支持广泛的浏览器，包括老旧浏览器
生态和插件	生态逐渐成熟，插件较少	生态成熟，插件丰富
开发体验	极快的热模块替换（HMR），优异的开发体验	可能较慢，但提供了更多的控制和配置能力
功能支持	适合大多数常见的项目，功能较为简化	支持复杂需求，适合大规模项目
学习曲线	低，易于上手	高，需要较多配置和理解其原理

vite：vitejs.cn/vite5-cn/gu…

webpack：webpack.docschina.org/concepts/

第二步路由配置

1：安装vue-router

npm i vue-router

2：配置vue-router

创建路由配置文件

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'  // 导入 vue-router
import Home from '../views/Home.vue'  // 导入视图组件
import About from '../views/About.vue'

const routes = [
  {
    path: '/',          // 路径
    name: 'Home',       // 路由名称
    component: Home     // 关联的组件
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

const router = createRouter({
  history: createWebHistory(),  // 使用 HTML5 history 模式
  routes
})

export default router

path：表示路由的 URL 路径。
component：表示该路径对应的 Vue 组件。
createWebHistory：表示使用 HTML5 History 模式，适合于现代浏览器。如果你想使用 hash 模式，可以改为 createWebHashHistory。

在vue中使用vue-router

在 main.js 或 main.ts 中引入 vue-router，并通过 app.use() 将路由配置添加到 Vue 实例中。

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'  // 导入路由配置

const app = createApp(App)

app.use(router)  // 使用 vue-router

app.mount('#app')

3：使用路由视图和路由链接

<!-- src/App.vue -->
<template>
  <div>
    <h1>Vue Router 示例</h1>
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view>  <!-- 渲染当前路由匹配的组件 -->
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

第三步基础页面搭建完成配置项目的默认样式

CSS 预处理器选择：scss less stylus

特性	SCSS	LESS	Stylus
语法	与标准 CSS 语法几乎一致，增加了一些扩展特性	基本与 CSS 相似，支持变量、嵌套等功能	语法灵活，可以省略分号和大括号，支持 JavaScript 表达式
学习曲线	中等，功能强大但稍复杂	简单，易于上手，学习成本低	高，灵活性大，但可能导致代码风格不一致
功能	- 变量支持 - 嵌套规则 - Mixins - 继承 - 运算支持 - 条件语句、循环	- 变量支持 - 嵌套规则 - Mixins（带参数） - 运算支持	- 变量、函数、嵌套 - Mixins（可接受参数） - 强大的控制流（if/else、for 等）
兼容性	与现有 CSS 完全兼容（可以直接使用标准 CSS）	与 CSS 兼容，适合逐步迁移	不完全兼容 CSS，可有不同语法风格
编译速度	中等，适用于大部分项目	较快，但依赖于 JavaScript，可能影响性能	非常快，支持高度优化，编译速度优于 SCSS 和 LESS
扩展性和功能支持	强大，社区支持广泛	较强，生态成熟，支持常用功能	较弱，社区和生态系统相对较小，但功能灵活强大
模块化支持	支持模块化，通过 `@import` 和 `@use` 来管理模块	支持 `@import`，模块化能力较简单	支持模块化，可以使用 `@import` 或 `@require` 来引用模块
生态和社区支持	非常成熟，广泛应用于大型项目（如 Bootstrap）	生态成熟，广泛应用于中小型项目	社区较小，主要用于自定义较多的项目
动态特性	支持数学运算、条件语句、循环等动态特性	支持混入传参和运算，但功能不如 SCSS 强大	强大的编程能力，支持 JavaScript 表达式和控制流
易于调试	由于与标准 CSS 相似，调试相对简单	调试较为简单，能清晰看到 CSS 代码	调试可能较为困难，尤其是复杂的动态样式
兼容性与工具链支持	广泛支持，与 Webpack、Gulp、Grunt 等工具兼容	支持与大部分工具链兼容，但不如 SCSS 广泛	支持与大部分工具链兼容，但生态不如 SCSS 丰富
适用场景	- 大型项目 - 多人协作 - 需要强大功能支持的项目	- 中小型项目 - 需要快速开发 - 简单样式管理的项目	- 高度自定义的项目 - 动态样式 - 强调灵活性和代码简洁
主流框架/库使用情况	被广泛使用（如 Bootstrap 4、Foundation）	被一些较老的框架使用（如 Bootstrap 3）	少数框架使用，主要由开发者自定义

选择建议：

SCSS：如果你正在开发一个大型项目，或者团队中有多人参与开发，SCSS 是最适合的选择。它的功能强大、语法清晰，而且社区支持广泛。
LESS：如果你需要快速开发，或者项目相对简单，LESS 是一个不错的选择。它的语法简洁，功能足够，且容易上手。
Stylus：如果你希望有更高的灵活性，并且项目需要非常自定义的样式逻辑，Stylus 是最佳选择。它的强大动态特性和灵活性适合那些需要精确控制样式的项目。

配置默认样式

reset.css

@charset "utf-8";
 
/* CSS Document */
* { color:#444; }
body { font:12px/1.5 "微软雅黑",Arial,Tahoma, Helvetica,\5b8b\4f53, sans-serif; }
html,body,div,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,object,code,em,span,var,legend,button,input,textarea,th,td,a,img,header,footer,nav,aside,audio,datalist,section { margin:0;padding:0;border:0;outline:0; }/*清除内外边距*/
h1,h2,h3,h4,h5,h6 { font-weight:normal;font-size:100%; }/*设置默认字体*/
:focus { outline:0; }
ul,ol,ul li,ol li { list-style: none; }/*重置列表*/
address,caption,cite,em,code,dfn,th,var { font-style:normal;font-weight:normal; }
form label { cursor:pointer; }
input,button,select,textarea { font-family:inherit;font-size:100%;outline:none; }
textarea { resize:none }
input { vertical-align:middle; }
img { border:0; }/*重置图片元素*/
table { border-collapse:collapse;border-spacing: 0; }/*重置表格*/
.l { float:left; }
.r { float:right; }
button,input[type="reset"],input[type="button"],input[type="submit"] { line-height:normal !important; }
a { text-decoration:none;}
a { color:#666;}
a:hover { text-decoration:underline; }
input { _filter:chroma(color=#000000); }
/*--清除浮动
------------------------------------------------------------------------------------------*/
.clearfix:after { clear:both;content:".";display:block;font-size:0;height:0;visibility:hidden; }
.clearfix:after { _zoom:1; }
.overflow { overflow:hidden; _zoom:1; }
.clear { clear:both; height:0;font-size:0; overflow:hidden; }

normalize.css

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 
/* Document
   ========================================================================== */
 
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
 
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}
 
/* Sections
   ========================================================================== */
 
/**
 * Remove the margin in all browsers.
 */
 
body {
  margin: 0;
}
 
/**
 * Render the `main` element consistently in IE.
 */
 
main {
  display: block;
}
 
/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
 
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
 
/* Grouping content
   ========================================================================== */
 
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
 
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}
 
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
 
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
 
/* Text-level semantics
   ========================================================================== */
 
/**
 * Remove the gray background on active links in IE 10.
 */
 
a {
  background-color: transparent;
}
 
/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
 
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}
 
/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
 
b,
strong {
  font-weight: bolder;
}
 
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
 
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
 
/**
 * Add the correct font size in all browsers.
 */
 
small {
  font-size: 80%;
}
 
/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
 
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
 
sub {
  bottom: -0.25em;
}
 
sup {
  top: -0.5em;
}
 
/* Embedded content
   ========================================================================== */
 
/**
 * Remove the border on images inside links in IE 10.
 */
 
img {
  border-style: none;
}
 
/* Forms
   ========================================================================== */
 
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
 
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}
 
/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
 
button,
input { /* 1 */
  overflow: visible;
}
 
/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
 
button,
select { /* 1 */
  text-transform: none;
}
 
/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
 
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
 
/**
 * Remove the inner border and padding in Firefox.
 */
 
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
 
/**
 * Restore the focus styles unset by the previous rule.
 */
 
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
 
/**
 * Correct the padding in Firefox.
 */
 
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
 
/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
 
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}
 
/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
 
progress {
  vertical-align: baseline;
}
 
/**
 * Remove the default vertical scrollbar in IE 10+.
 */
 
textarea {
  overflow: auto;
}
 
/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
 
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}
 
/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
 
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
 
/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
 
[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
 
/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
 
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
 
/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
 
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
 
/* Interactive
   ========================================================================== */
 
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
 
details {
  display: block;
}
 
/*
 * Add the correct display in all browsers.
 */
 
summary {
  display: list-item;
}
 
/* Misc
   ========================================================================== */
 
/**
 * Add the correct display in IE 10+.
 */
 
template {
  display: none;
}
 
/**
 * Add the correct display in IE 10.
 */
 
[hidden] {
  display: none;
}

一般推荐使用normalize.css，不会初始化掉基础的元素样式！！！

第四步数据存储

Vuex vs Pinia

特性	Vuex	Pinia
官方推荐	在 Vue 2.x 中使用，Vue 3 中仍然支持	Vue 3 的官方推荐解决方案
API风格	基于 Vue 2.x 的 `Options API` 风格	基于 Vue 3 的 `Composition API` 风格
模块化	支持模块化，但需要手动配置	更易于模块化，支持直接在 store 中定义模块
热重载支持	支持，但需要额外配置	内置支持热重载
TypeScript 支持	支持，但配置较为复杂	内置良好的 TypeScript 支持
状态持久化	需要手动集成插件（如 `vuex-persistedstate`）	默认支持持久化状态
调试工具支持	良好，支持 Vue Devtools	目前支持较好，未来将逐步完善

以vue3项目为例，使用pinia

安装依赖

npm install pinia

创建 Pinia Store：

// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    }
  },
  getters: {
    doubleCount: (state) => state.count * 2
  }
})

在 Vue 组件中使用 Pinia：

// App.vue
<template>
  <div>
    <p>Count: {{ counter.count }}</p>
    <p>Double Count: {{ counter.doubleCount }}</p>
    <button @click="counter.increment">Increment</button>
    <button @click="counter.decrement">Decrement</button>
  </div>
</template>

<script setup>
import { useCounterStore } from './stores/counter'

// 使用 Pinia store
const counter = useCounterStore()
</script>

在 main.js 中注册 Pinia：

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'

const app = createApp(App)

app.use(createPinia())  // 使用 Pinia

app.mount('#app')

第五步接口请求

借鉴以下文档

blog.csdn.net/hollycloud/…

第六步异常情况处理

在基础项目搭建完成并正常运行之后，虽然基本功能已经实现且运行稳定，但为了确保系统的健壮性和用户体验，还需要进一步处理一些异常情况。以下是几个关键点：

用户错误捕获：增强系统的错误处理机制，对于用户可能遇到的各种操作错误进行友好提示，并将用户的错误信息保存下来便于开发人员分析与处理
第三方服务接入：如果项目中涉及到与其他平台（如支付接口、社交媒体登录等）的集成，则需要特别注意安全性和稳定性问题。同时，也要准备好备用方案，在主要服务提供商出现问题时能够快速切换到其他选项上。
性能监控与调优：持续关注应用程序的表现，利用工具收集分析数据来发现瓶颈所在，并采取相应措施加以改进。比如通过缓存技术减轻服务器负担、优化数据库查询效率等方式提高响应速度，从而给用户带来更好的体验。
安全防护措施：加强对敏感信息的保护力度，包括但不限于密码加密存储、防止SQL注入攻击等手段。同时也要建立健全的数据备份恢复机制，以防万一发生意外情况时能尽快恢复正常服务。

总之，在项目初步上线后应该根据实际情况不断调整和完善，力求为用户提供一个既安全可靠的使用环境。

如何从0-1搭建前端项目