【Vue零基础入门001】

目录一、前置知识1.前端工程化发展1.1 文件划分原始方式1.2 命名空间1.3 IIFE立即执行函数表达式1.4 CommonJS1.5 ES 模块ES ModulesESM2.Vue CLI 与 Vite 对比3.两款必备工具 nvm 和 npm3.1 nvmNode Version Manager3.2 npmNode Package Manager3.3 nvm 与 npm 的关系二、vue-cli的项目搭建及初始化1. 环境准备2. 安装 Vue CLI3. 创建新项目4. 项目结构解析5. 启动开发服务器一、前置知识1.前端工程化发展大家想象一个场景当我们在改前端页面的代码时如果所有导入的文件的代码没有任何的约束就会产生很多不必要的麻烦。不同文件的变量随意暴露在全局很容易出现命名冲突改一处代码就可能导致其他页面莫名报错文件依赖顺序全靠人工记忆漏引、错引资源更是家常便饭。代码越写越杂乱复用无从谈起后期维护和多人协作更是举步维艰。而模块化与前端工程化正是为了解决这些乱象而生通过统一的规范管理代码拆分、依赖引入让整个开发过程变得有序可控。在前端工程化的发展过程中模块化规范是解决代码组织、依赖管理和作用域隔离的核心。以下是几种主要模块化方案的简单例子和说明1.1 文件划分原始方式说明最简单的模块化方式通过不同的文件来组织代码但所有变量都暴露在全局作用域容易造成命名冲突。!-- index.html -- script srcmodule-a.js/script script srcmodule-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)); // 61.5 ES 模块ES ModulesESM说明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 typemodule srcmain.js/script总结从文件划分到 ES 模块模块化规范不断演进解决了全局污染、依赖管理、代码封装等问题。现代前端工程化工具如 Vite正是基于原生 ES 模块提供了更优的开发体验。2.Vue CLI 与 Vite 对比Vue CLI 和 Vite 都是 Vue.js 生态中主流的项目脚手架和构建工具但它们在设计理念、构建方式和开发体验上存在显著差异。下表从多个维度进行了详细对比对比维度Vue CLIVite核心构建工具基于 Webpack基于原生 ES Modules (ESM) Rollup启动速度较慢需打包整个应用极快按需编译无需打包热更新 (HMR)较快基于 Webpack HMR极快基于 ESM 的精确更新生产构建Webpack 打包优化成熟Rollup 打包性能优秀配置复杂度较高需熟悉 Webpack 配置较低约定大于配置开箱即用插件生态丰富Vue CLI 插件 Webpack 插件快速增长Vite 插件 Rollup 插件TypeScript 支持需额外配置 ts-loader 等原生支持无需额外配置适用场景传统大型项目、需要高度自定义配置现代项目、追求极速开发体验、库开发首次发布时间2015 年2020 年官方推荐Vue 2 时代主流Vue 3 仍支持Vue 3 官方推荐未来趋势3.两款必备工具 nvm 和 npm在前端开发中Node.js 是必不可少的运行环境而nvm和npm则是管理 Node.js 版本和依赖包的两款核心工具。3.1 nvmNode Version Managernvm是一个 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.03.2 npmNode Package Managernpm是 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 build3.3 nvm 与 npm 的关系nvm 管理 Node.js 版本不同版本的 Node.js 会自带对应版本的 npm。npm 管理项目依赖在选定的 Node.js 版本环境下使用 npm 安装和管理项目所需的包。二、vue-cli的项目搭建及初始化1. 环境准备在开始之前请确保你的开发环境已安装以下工具Node.js版本建议 12.x 或更高。可使用上一节介绍的 nvm 进行安装和管理。npmNode.js 包管理器通常随 Node.js 一起安装。打开终端Windows 可使用 PowerShell 或 CMDmacOS/Linux 使用 Terminal运行以下命令检查版本node -v npm -v2. 安装 Vue CLIVue CLI 是一个全局 npm 包使用以下命令进行全局安装npm install -g vue/cli安装完成后验证安装是否成功vue --version如果看到版本号例如vue/cli 5.x.x说明安装成功。3. 创建新项目在想要创建项目的目录下打开cmd使用vue create命令创建新项目my-vue-appvue 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 应用的欢迎页面。