企业官网建设流程全解析

目录

一、前置知识

1.前端工程化发展

1.1 文件划分（原始方式）

1.2 命名空间

1.3 IIFE（立即执行函数表达式）

1.4 CommonJS

1.5 ES 模块（ES Modules，ESM）

2.Vue CLI 与 Vite 对比

3.两款必备工具 nvm 和 npm

3.1 nvm（Node Version Manager）

3.2 npm（Node Package Manager）

3.3 nvm 与 npm 的关系

二、vue-cli的项目搭建及初始化

1. 环境准备

2. 安装 Vue CLI

3. 创建新项目

4. 项目结构解析

5. 启动开发服务器

一、前置知识

1.前端工程化发展

大家想象一个场景：当我们在改前端页面的代码时，如果所有导入的文件的代码没有任何的约束，就会产生很多不必要的麻烦。不同文件的变量随意暴露在全局，很容易出现命名冲突，改一处代码就可能导致其他页面莫名报错；文件依赖顺序全靠人工记忆，漏引、错引资源更是家常便饭。代码越写越杂乱，复用无从谈起，后期维护和多人协作更是举步维艰。而模块化与前端工程化，正是为了解决这些乱象而生，通过统一的规范管理代码拆分、依赖引入，让整个开发过程变得有序可控。

在前端工程化的发展过程中，模块化规范是解决代码组织、依赖管理和作用域隔离的核心。以下是几种主要模块化方案的简单例子和说明：

1.1 文件划分（原始方式）

说明：最简单的模块化方式，通过不同的文件来组织代码，但所有变量都暴露在全局作用域，容易造成命名冲突。

<!-- index.html --> <script src="module-a.js"></script> <script src="module-b.js"></script> <script> // 直接使用全局变量 console.log(dataFromA); // 来自 module-a.js console.log(dataFromB); // 来自 module-b.js </script>

// module-a.js var dataFromA = "这是模块A的数据";

// module-b.js var dataFromB = "这是模块B的数据";

1.2 命名空间

说明：通过封装成对象来组织代码，减少全局变量污染，但对象内部状态仍可被外部直接修改。

// 定义命名空间 var MyApp = MyApp || {}; MyApp.moduleA = { data: "模块A数据", getData: function() { return this.data; } }; MyApp.moduleB = { data: "模块B数据", setData: function(newData) { this.data = newData; } }; // 使用 console.log(MyApp.moduleA.getData()); // "模块A数据" MyApp.moduleB.setData("新数据");

1.3 IIFE（立即执行函数表达式）

说明：利用函数作用域创建私有空间，通过闭包暴露公共接口，实现模块的封装和私有变量保护。

// moduleA.js var moduleA = (function() { // 私有变量 var privateData = "私有数据"; // 公共接口 return { getData: function() { return privateData; }, publicData: "公共数据" }; })(); // moduleB.js var moduleB = (function(moduleA) { // 依赖注入 console.log(moduleA.getData()); // "私有数据" return { doSomething: function() { console.log("使用模块A的数据:", moduleA.publicData); } }; })(moduleA || {}); // 使用 console.log(moduleA.publicData); // "公共数据" moduleB.doSomething();

1.4 CommonJS

说明：Node.js 采用的模块规范，使用require()导入模块，module.exports或exports导出模块，同步加载，主要用于服务端。

// math.js function add(a, b) { return a + b; } function multiply(a, b) { return a * b; } module.exports = { add, multiply }; // 或者使用 exports // exports.add = add; // exports.multiply = multiply;

// main.js const math = require('./math.js'); console.log(math.add(2, 3)); // 5 console.log(math.multiply(2, 3)); // 6

1.5 ES 模块（ES Modules，ESM）

说明：ECMAScript 官方标准模块系统，使用import和export语法，静态分析，支持异步加载，是现代前端开发的主流。

// utils.js // 命名导出 export const PI = 3.14159; export function circleArea(radius) { return PI * radius * radius; } // 默认导出 export default function greet(name) { return Hello, ${name}!; }

// main.js // 导入默认导出和命名导出 import greet, { PI, circleArea } from './utils.js'; console.log(greet("World")); // "Hello, World!" console.log(PI); // 3.14159 console.log(circleArea(5)); // 78.53975 // 整体导入 import * as utils from './utils.js'; console.log(utils.PI); // 3.14159

<!-- 在浏览器中使用 ES 模块 --> <script type="module" src="main.js"></script>

总结：从文件划分到 ES 模块，模块化规范不断演进，解决了全局污染、依赖管理、代码封装等问题。现代前端工程化工具（如 Vite）正是基于原生 ES 模块，提供了更优的开发体验。

2.Vue CLI 与 Vite 对比

Vue CLI 和 Vite 都是 Vue.js 生态中主流的项目脚手架和构建工具，但它们在设计理念、构建方式和开发体验上存在显著差异。下表从多个维度进行了详细对比：

3.两款必备工具 nvm 和 npm

在前端开发中，Node.js 是必不可少的运行环境，而nvm和npm则是管理 Node.js 版本和依赖包的两款核心工具。

3.1 nvm（Node Version Manager）

nvm是一个 Node.js 版本管理工具，它允许你在同一台机器上安装和切换多个 Node.js 版本。

主要作用：

• 多版本共存：可以在不同项目中使用不同版本的 Node.js，避免因版本不兼容导致的问题。
• 一键切换：通过简单命令即可切换全局或项目使用的 Node.js 版本。
• 便捷安装：无需手动下载安装包，通过命令行即可安装指定版本的 Node.js。
• 环境隔离：为不同项目创建独立的 Node.js 环境，保证项目依赖的稳定性。

常用命令示例：

# 查看所有可安装的 Node.js 版本 nvm list available 安装指定版本的 Node.js（如 18.20.0） nvm install 18.20.0 使用已安装的某个版本 nvm use 18.20.0 查看当前使用的 Node.js 版本 node -v 查看所有已安装的版本 nvm list 设置默认版本（新开终端自动使用） nvm alias default 18.20.0

3.2 npm（Node Package Manager）

npm是 Node.js 的包管理工具，也是世界上最大的软件注册表。它用于安装、分享和管理 JavaScript 代码包（package）。

主要作用：

• 依赖管理：通过package.json文件记录项目依赖，方便团队协作和版本控制。
• 包安装：从 npm 仓库下载并安装第三方库、框架和工具。
• 脚本执行：在package.json中定义脚本命令，简化开发流程（如启动、构建、测试）。
• 包发布：将自己开发的模块发布到 npm 仓库，供他人使用。

常用命令示例：

# 初始化项目，生成 package.json 文件 npm init -y 安装项目依赖（保存到 dependencies） npm install package-name 安装开发依赖（保存到 devDependencies） npm install package-name --save-dev 全局安装工具（如脚手架） npm install -g @vue/cli 查看已安装的包 npm list 运行 package.json 中定义的脚本 npm run dev npm run build

3.3 nvm 与 npm 的关系

• nvm 管理 Node.js 版本：不同版本的 Node.js 会自带对应版本的 npm。
• npm 管理项目依赖：在选定的 Node.js 版本环境下，使用 npm 安装和管理项目所需的包。

二、vue-cli的项目搭建及初始化

1. 环境准备

在开始之前，请确保你的开发环境已安装以下工具：

• Node.js：版本建议 12.x 或更高。可使用上一节介绍的 nvm 进行安装和管理。
• npm：Node.js 包管理器，通常随 Node.js 一起安装。

打开终端（Windows 可使用 PowerShell 或 CMD，macOS/Linux 使用 Terminal），运行以下命令检查版本：

node -v npm -v

2. 安装 Vue CLI

Vue CLI 是一个全局 npm 包，使用以下命令进行全局安装：

npm install -g @vue/cli

安装完成后，验证安装是否成功：

vue --version

如果看到版本号（例如@vue/cli 5.x.x），说明安装成功。

3. 创建新项目

在想要创建项目的目录下打开cmd，使用vue create命令创建新项目my-vue-app：

vue create my-vue-app

执行命令后，Vue CLI 会进入交互式配置流程，这里可以跟着作者一起配置：

方向键上下左右，回车是确认，<space>空格是选择，这个界面是单向流程，不能回退

第一次配置的同学只有下面三个选项，test选项是作者自定义的，我们选最下面这一个，点击回车

是否要保存为这个项目作为一个模板保存？想保存就保存。

选择代码检查和格式化工具的配置

选 Lint on save，这个选项表示在保存文件时会自动运行 lint 工具来检查代码格式和质量。

选这个表示生成的项目将会为Babel等工具单独创建配置文件。

这个选项是询问你是否要将当前的配置保存为一个预设，以便将来创建类似项目时能够快速应用这些配置。

给这个预设取一个名字

配置完成后，Vue CLI 会自动安装依赖并创建项目结构。

出现这个界面就是成功了，根据他给的命令操作就可以打开vue项目了

4. 项目结构解析

创建完成后，进入项目目录并查看结构：

cd my-vue-app ls -la

典型结构如下：

my-vue-app/ ├── node_modules/ # 项目依赖包 ├── public/ # 静态资源（不会被 webpack 处理） │ ├── index.html # 入口 HTML 模板 │ └── favicon.ico # 网站图标 ├── src/ # 源代码目录 │ ├── assets/ # 静态资源（图片、字体等，会被 webpack 处理） │ ├── components/ # Vue 组件 │ ├── views/ # 页面级组件（如果选了 Router） │ ├── router/ # 路由配置（如果选了 Router） │ ├── store/ # Vuex 状态管理（如果选了 Vuex） │ ├── App.vue # 根组件 │ └── main.js # 应用入口文件 ├── .gitignore # Git 忽略文件配置 ├── babel.config.js # Babel 配置 ├── package.json # 项目依赖和脚本 ├── README.md # 项目说明 └── vue.config.js # Vue CLI 自定义配置文件（可选）

5. 启动开发服务器

在项目根目录下运行：

npm run serve # 或 yarn serve

控制台会输出本地开发服务器地址（通常是http://localhost:8080）。打开浏览器访问该地址，即可看到 Vue 应用的欢迎页面。