【每天一个小笔记】01 Vue项目创建

创建方法一（不推荐）：

安装 Vue CLI

确保系统已安装 Node.js（建议版本 ≥16.0.0）。通过以下命令全局安装 Vue CLI：

#查看node版本
node -v
#安装VUE脚手架
npm install -g @vue/cli

安装完成后验证版本：

vue --version

创建新项目

使用 Vue CLI 创建一个新项目：

vue create project-name

交互式命令行中可选择预设配置（如手动选择 Babel、Router、Vuex 等），或直接使用默认配置。

启动开发服务器

进入项目目录并启动开发服务器：

cd project-name
npm run serve
 

项目默认运行在 http://localhost:8080

创建方法二（推荐）

安装 Vite

确保系统已安装 Node.js（建议版本 ≥16.0.0）。通过以下命令全局安装 Vite：

#查看node版本
node -v
#使用 npm 创建vite
npm create vite@latest

配置项目信息

运行命令后，会出现交互式配置选项，按提示操作：

1. 输入项目名称：例如 my-vue-project（直接回车使用默认名 vite-project),项目名称输入问题（格式建议）：直接输入完整的英文项目名称（建议小写字母+连字符）
2. 选择框架：通过上下箭头选择 Vue（按回车确认）。
3. 选择变体：
   • 如需使用 Vue 3 + JavaScript，选择 JavaScript；
   • 如需使用 Vue 3 + TypeScript，选择 TypeScript；
   • 如需集成路由、Pinia 等（推荐新手），可选择 Vue + TypeScript + Router + Pinia + ESLint（按需选择）。

通过Vite安装Vue

进入项目并安装依赖

进入项目目录并安装运行的相关依赖：

#进入创建的项目内
cd project-name
#安装基础依赖
npm install

如果采用Vite的方法创建Vue的话，想查看Vue版本会报错，必须安装脚手架才能查看

#会报错
vue --version
#需要安装vue/cli
npm install -g @vue/cli

启动开发服务器

npm run dev

终端会显示项目运行地址（通常是 http://127.0.0.1:5173/），打开浏览器访问该地址，即可看到 Vite + Vue 的默认页面。

项目结构说明

生成的核心目录结构包括：

• src/：主开发目录，包含组件、路由、状态管理等。
• public/：静态资源（如 HTML 模板）。
• node_modules/：依赖库。
• package.json：项目配置和脚本命令。

添加常用插件

按需安装常用插件（如 Vue Router、Vuex）：

vue add router
vue add vuex

或通过 npm 手动安装：

npm install vue-router vuex

生产环境构建

生成优化后的生产环境代码：

npm run build

构建结果默认输出到 dist/ 目录，可直接部署到服务器。

配置覆盖

自定义配置需在项目根目录创建 vue.config.js，例如修改端口：

module.exports = {
  devServer: {
    port: 3000
  }
};

结尾补充说明

1、为什么建议使用 Node.js 16+ 版本

① 安全维护保障

        Node.js 14.x 及更早版本已逐步停止官方安全维护（14.x 的 LTS 支持已于 2023 年终止）。16.x 及以上版本将持续获得安全补丁，有效修复潜在漏洞，避免因依赖旧版本而引发的安全风险。

②性能与功能优化

        16.x 版本引入了多项关键改进：

• 原生支持 ES 模块（import/export），无需配置即可使用现代 JavaScript 模块化方案

• 搭载 V8 9.0 引擎，显著提升执行效率并支持新特性（如 Promise.any、WeakRef 等）

• 优化工具链（如 npm 升级），提高依赖管理和构建效率

③生态兼容性

        主流前端框架（Vue 3、React 最新版）、构建工具（Vite、Webpack 5）及第三方库已逐步放弃对低版本 Node.js 的支持。使用 16.x 以下版本可能导致依赖安装失败或运行时异常。

④长期支持优势

Node.js 16.x 属于 LTS（长期支持）版本，官方维护周期持续至 2024 年底（后续 18.x/20.x 等版本支持周期更长），为项目迭代提供稳定可靠的技术保障。

2、使用Vite和Vue脚手架创建项目有什么区别

Vite 和 Vue CLI 都是用于构建 Vue 项目的工具，但它们的设计理念、底层原理和使用场景有很大区别，核心差异如下：

1. 底层构建工具不同

• Vue CLI：基于 Webpack 构建，Webpack 是一个 “bundler（打包器）”，会在项目启动时先将所有代码（JS、CSS、图片等）打包成 bundle 文件，再启动开发服务器。缺点：项目越大，打包时间越长，启动速度越慢（尤其冷启动）。

• Vite：基于 原生 ESM（ES 模块） 构建，开发时不会预先打包所有文件，而是通过浏览器原生支持的 import 语法，按需加载模块（请求某个文件时才编译它）。优点：启动速度极快（毫秒级），热更新也更快，项目越大，优势越明显。

2. 开发体验差异

• 启动速度：Vite 远快于 Vue CLI。Vue CLI 启动时需要遍历依赖、打包代码，大型项目可能需要几十秒；Vite 直接启动服务器，按需编译，启动时间通常在 1 秒内。

• 热更新（HMR）：Vite 的热更新是 “按需更新”，只重新编译修改的文件，不影响整个项目；Vue CLI 基于 Webpack，热更新时可能需要重新处理依赖链，大型项目中响应较慢。

• 配置复杂度：Vue CLI 基于 Webpack，配置项繁多（虽然提供了 vue.config.js 简化配置，但底层仍依赖 Webpack 生态）；Vite 的配置更简洁（vite.config.js），且内置了很多现代工具（如 esbuild 用于依赖预构建），开箱即用。

3. 适用场景

• Vue CLI：

  • 适合需要兼容旧浏览器（如 IE11）的项目（Webpack 对旧浏览器支持更好）；
  • 依赖大量 Webpack 插件或 loader 的项目（生态成熟，迁移成本低）；
  • 习惯 Webpack 工作流的团队。

• Vite：

  • 适合现代浏览器环境的项目（不支持 IE，因依赖原生 ESM）；
  • 追求极致开发效率的项目（快速启动、即时热更新）；
  • 使用 Vue 3、React 等现代框架的新项目（Vite 对 Vue 3 的单文件组件支持更优）。

4. 生态与扩展性

• Vue CLI 深度集成 Vue 生态，提供 vue create vue add 等命令，可一键集成路由、Vuex 等插件，适合快速搭建标准 Vue 项目。
• Vite 生态更中立，不仅支持 Vue，还支持 React、Svelte 等框架，插件系统更轻量，扩展性强，但部分场景需要手动配置（如路由、状态管理）。