【Vue】MacOS从0开始创建一个前端Vue项目并集成AntDesignVue

ops/2025/1/15 2:36:22/

文章目录

  • 环境安装
  • 创建vue项目
    • vue项目结构解读
    • 集成AntDesignVue

环境安装

  1. nodejs环境下载：https://nodejs.org/zh-cn，从官网下载后直接安装即可，通过下面命令判断是否安装成功：
node -v
npm -v

如果有返回版本号就安装成功了。

  1. 为npm配置国内镜像
npm config set registry https://registry.npmmirror.com/

验证镜像是否设置成功：

npm config get registry

如果返回 https://registry.npmmirror.com/，说明设置成功。

对于可能会需要临时使用官方源时：

npm install <package_name> --registry=https://registry.npmjs.org/

上述配置，可以通过npm config list命令来查看。

  1. 安装 Vue CLI

使用 npm 全局安装 Vue CLI：

npm install -g @vue/cli

可能会遇到权限问题：
在这里插入图片描述

可以通过用管理员权限安装：

sudo npm install -g @vue/cli@5.0.8

虽然使用 sudo 是一种快速解决方案，但它可能会导致潜在的权限问题，建议慎用。

==推荐使用：==更改全局 npm 包安装目录

为了避免频繁使用 sudo，可以更改 npm 的全局包安装路径到一个用户拥有权限的目录。

（1）创建一个新的全局安装目录：

mkdir ~/.npm-global

（2）配置 npm 使用这个目录作为全局路径：

npm config set prefix '~/.npm-global'

（3）将新目录添加到 PATH 中（以便终端识别全局命令）：

echo 'export PATH=$PATH:~/.npm-global/bin' >> ~/.zshrc
source ~/.zshrc

（4）再次运行全局安装命令（无需 sudo）：

npm install -g @vue/cli@5.0.8

判读vue-cli是否安装成功：

vue --version

返回版本号即安装成功。

创建vue项目

官方教程：https://cli.vuejs.org/zh/guide/installation.html

通过vue create XXX创建一个项目名为XXX的项目,会看到以下几种选择和选项配置。以下是详细解释以及一般情况下的选择建议。

在这里插入图片描述

  • Default ([Vue 3] babel, eslint)：使用 Vue CLI 提供的默认预设，包含 Vue 3、Babel 和 ESLint。

  • Manually select features：手动选择项目需要的功能（推荐）。

如果选择 Manually select features，你会看到以下选项：
在这里插入图片描述
Babel

  • Babel 是一个 JavaScript 编译器，用于将现代 JavaScript 转换为旧版浏览器支持的代码。
  • 建议：一般项目都需要，默认勾选即可。

TypeScript

  • 如果你想使用 TypeScript 编写代码，可以启用此选项。

  • 建议：

    • 如果团队要求或你喜欢 TypeScript，选择它。
    • 如果不熟悉 TypeScript 或更倾向于使用纯 JavaScript，可以跳过。

Progressive Web App (PWA) Support

  • PWA 选项为项目添加离线缓存和 Web 应用的增强功能（如安装到桌面）。

  • 建议：

    • 如果项目需要支持 PWA，启用此选项。
    • 普通 Web 应用可以忽略。

Router

  • 用于添加 Vue Router，方便实现页面导航和路由管理。

  • 建议：

    • 如果项目有多页面导航需求（比如前后端分离项目），启用此选项。
    • 简单的单页面应用可以忽略。

Vuex

  • 用于添加 Vuex，方便管理全局状态。

  • 建议：

    • 如果项目有复杂的状态管理需求（如跨组件共享数据），启用此选项。
    • 小型应用可以暂时跳过，使用 Vue 3 提供的 Composition API 管理状态。

CSS Pre-processors

  • 选择是否使用 CSS 预处理器（如 SCSS、Sass、Less、Stylus）。

  • 建议：

    • 如果你熟悉并喜欢 CSS 预处理器，选择相应的选项（如 SCSS/Sass）。
    • 如果项目需求简单，可以直接使用原生 CSS。

Linter / Formatter

  • 用于选择代码校验和格式化工具。

  • 通常选项包括：

    • ESLint with error prevention only：仅用于捕获错误。
    • ESLint + Airbnb config：使用 Airbnb 风格指南。
    • ESLint + Standard config：使用 JavaScript 标准风格。
    • ESLint + Prettier：同时使用 ESLint 和 Prettier。

  • 建议：

    • 对于团队开发，推荐 ESLint + Prettier 或 ESLint + Airbnb config。
    • 单人项目可以选择简单的 ESLint with error prevention only。

Unit Testing

  • 是否需要设置单元测试，工具选项包括 Jest 或 Mocha。

  • 建议：

    • 如果项目需要测试驱动开发（TDD）或严格质量要求，启用此选项。
    • 小型项目或初学者可以跳过。

E2E Testing

  • 是否需要端到端测试（E2E），工具选项包括 Cypress 或 Nightwatch。

  • 建议：

    • 如果项目需要完整的自动化测试流程，启用此选项。
    • 普通项目可以跳过。

最终推荐最简单的选择：
在这里插入图片描述

Choose Vue version

  • 选择 Vue 版本，Vue CLI 支持 Vue 2 和 Vue 3。
  • 建议：选择 Vue 3（默认），除非你需要兼容老项目。

在这里插入图片描述

路由风格选择，历史模式链接不带#的是yes：
在这里插入图片描述
格式选择：

  • ESLint with error prevention only：仅用于捕获错误。
  • ESLint + Airbnb config：使用 Airbnb 风格指南。
  • ESLint + Standard config：使用 JavaScript 标准风格。
  • ESLint + Prettier：同时使用 ESLint 和 Prettier。
    在这里插入图片描述

保存后对代码进行检测：
在这里插入图片描述
采用package.json进行管理：
在这里插入图片描述

保存上面配置的模型并命名，方便下次直接创建：
在这里插入图片描述

在这里插入图片描述

等待1分钟左右，创建成功：
在这里插入图片描述

根据提示的两个命令，运行这个web项目：

cd web
npm run serve

在这里插入图片描述

访问：http://localhost:8080/
在这里插入图片描述

到此vue前端项目构建成功！

其实npm run serve命令实际上是package.json文件里面的serve，例如我们在这个里面添加一个端口指定，然后重新运行npm run serve：
在这里插入图片描述
项目运行到9000端口了：
在这里插入图片描述

在IDEA编辑器中，可以右击package.json文件，选择Show npm Scripts
在这里插入图片描述

编辑器中就会多一个下面的标识，双击下面的命令就可以直接执行了，不需要在终端输入命令执行了：
在这里插入图片描述

vue项目结构解读

在这里插入图片描述

node_modules/

  • 内容：存放所有通过 npm 安装的依赖包。
  • 重要性：一般无需手动操作，所有依赖都在 package.json 中记录。如果需要重新安装依赖，可以删除该文件夹并运行 npm install。

public/

  • 内容：存放静态资源，不会经过 Webpack 打包处理。

  • 重要文件：

    • index.html：

      • 项目 HTML 模板文件。
      • Vue 将把生成的 JavaScript 和 CSS 文件自动插入到这里。
      • 重点：如果需要修改页面的 <title> 或引入外部库（如 CDN），可以在此修改。

    • favicon.ico ：

      • 网站图标，浏览器标签上的小图标。

src/（项目源代码）

这是主要的开发目录，存放 Vue 项目核心代码。

src/assets/

  • 内容：存放静态资源，如图片、字体、CSS 等。
  • 重要性：通过 import 引用资源时，资源会被 Webpack 打包优化。

src/components/

  • 内容：存放可复用的 Vue 组件。
  • 示例：HelloWorld.vue 是一个示例组件。
  • 重点：所有组件都以 .vue 文件形式存储，包含 模板（template）、逻辑（script） 和 样式（style）。

src/router/

  • 内容：路由相关配置。

  • 文件：
    index.js

    • 定义路由表和页面导航逻辑。
    • 重点：如果你选择了 Vue Router，这里会有路由配置文件，用于定义 URL 和对应组件的映射。

src/store/

  • 内容：全局状态管理。

  • 文件：

    index.js

    • 如果选择了 Vuex，这里是 Vuex 的状态配置文件。
    • 重点：定义全局的状态（state）、修改方法（mutations）、异步操作（actions）等。

src/views/

  • 内容：存放页面级别的 Vue 组件。

  • 文件：

    • App.vue ：

      • Vue 项目的根组件。
      • 重点：所有页面和组件最终都会渲染在这里的 <template> 中。

    • main.js：

      • 项目的入口文件。

      • 重点：

        • 创建 Vue 应用实例。
        • 挂载 Vue Router 和 Vuex。
        • 挂载到 DOM 节点（通常是 public/index.html 的 <div id="app">）。

其他配置文件

.gitignore

  • 内容：定义哪些文件或文件夹不需要提交到 Git 仓库。
  • 示例：node_modules 通常会被忽略。

babel.config.js

  • 内容：Babel 的配置文件，用于转译现代 JavaScript 以兼容旧浏览器。

jsconfig.json

  • 内容：用于配置 VSCode 的智能提示和路径别名。
  • 重要性：如果你使用路径别名（如 @/components），需要在这里配置。

package.json

  • 内容：项目的核心配置文件。

  • 重点：

    • dependencies：项目运行时需要的依赖。

    • devDependencies：项目开发时需要的依赖。

    • scripts：

      • 定义常用的 npm 命令，如 npm run serve 启动开发服务器，npm run build 进行生产环境打包。

package-lock.json

  • 内容：记录依赖的精确版本号，用于保证依赖一致性。
  • 重要性：不需要手动修改，运行 npm install 时自动生成。

vue.config.js

  • 内容：Vue CLI 的配置文件。

  • 重点：

    • 如果需要修改 Webpack 配置（如路径别名、自定义代理服务器等），可以在这里进行设置。

项目开发中的重要文件

  • src/main.js：应用入口，管理全局配置。
  • src/App.vue：根组件，其他组件渲染的入口。
  • src/router/index.js：路由文件（如果选择了 Vue Router）。
  • src/store/index.js：状态管理文件（如果选择了 Vuex）。
  • public/index.html：项目的 HTML 模板。

集成AntDesignVue

  1. 官方网站：https://antdv.com/docs/vue/getting-started-cn
  2. 安装命令：npm i --save ant-design-vue
  3. 安装图标命令：npm install --save @ant-design/icons-vue
  4. 在项目main.js全局引入：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';
import * as Icons from '@ant-design/icons-vue';const app = createApp(App);
app.use(Antd).use(store).use(router).mount('#app');// 全局使用图标
const icons = Icons;
for (const i in icons) {app.component(i, icons[i]);
}

http://www.ppmy.cn/ops/149862.html

相关文章

2024 高级爬虫笔记（六）scrapy框架基础知识

2024 高级爬虫笔记（六）scrapy框架基础知识

目录 一、Scrapy框架基础知识1.1、什么是scrapy&#xff1f;1.2、scrapy的工作流程1.3、scrapy中每个模块的作用&#xff1a;1.4、scrapy的入门使用1.4.1 安装scrapy1.4.2、scrapy项目实现流程1.4.3、创建scrapy项目1.4.4、创建爬虫1.4.5、完善spider1.4.6、配置settings文件1.…
阅读更多...
【Rust】结构体定义域实例化

【Rust】结构体定义域实例化

目录 思维导图 1. 结构体的定义与实例化 1.1 结构体的基本概念 1.2 定义结构体 1.3 创建结构体实例 1.4 结构体的定义与实例化示例 2. 访问与修改结构体字段 2.1 访问字段 2.2 修改字段 3. 结构体实例的构造函数 3.1 构造函数的定义 3.2 使用字段初始化简写 4. 结…
阅读更多...
RIP协议在简单网络架构的使用

RIP协议在简单网络架构的使用

目录 基本概念路由更新机制特点与局限性场景模拟 注意&#xff1a;本文的配置为上文《复杂园区网基本分支的构建》拓展&#xff0c;主要记录rip协议在简单网络架构的使用。 RIP&#xff08;Routing Information Protocol&#xff0c;路由信息协议&#xff09;是一种基于距离向…
阅读更多...
如何实现多级缓存？

如何实现多级缓存？

本文重点说一说在Java应用中&#xff0c;多级缓存如何实现。 多级缓存是比较常见的一种性能优化的手段&#xff0c;一般来说就是本地缓存分布式缓存。 本地缓存一般采用Caffeine和Guava&#xff0c;这两种是性能比较高的本地缓存的框架。他们都提供了缓存的过期、管理等功能。…
阅读更多...
nginx反向代理+缓存

nginx反向代理+缓存

1、nginx-LB配置页面缓存 [rootOldboy conf]# vi nginx.conf http {include mime.types;default_type application/octet-stream;sendfile on;keepalive_timeout 65;include proxy.conf; …
阅读更多...
《系统爆破：MD5易破，后台登录可爆破？》

《系统爆破：MD5易破，后台登录可爆破？》

声明&#xff1a;笔记的只是方便各位师傅学习知识&#xff0c;以下代码、网站只涉及学习内容&#xff0c;其他的都与本人无关&#xff0c;切莫逾越法律红线&#xff0c;否则后果自负。 爆破Sales系统 一、爆破MD5 场景&#xff1a;已知MD5的加密字符串&#xff0c;如何得知明…
阅读更多...
Linux OOM | Early OOM | 进程监视

Linux OOM | Early OOM | 进程监视

注&#xff1a; 本文为 “Linux OOM” 相关文章合辑。 Linux OOM 终结者 译者&#xff1a;花名有孚 | 2015-07-21 08:47 现在是早晨 6 点钟。已经醒来的我正在总结到底是什么事情使得我的起床闹铃提前了这么多。我们的监控系统显示&#xff0c;Plumbr 服务出故障了。 现在我…
阅读更多...
搜索引擎的设计与实现【源码+文档+部署讲解】

搜索引擎的设计与实现【源码+文档+部署讲解】

目 录 目 录 1 绪论 1.1 项目背景 1.2 国内外发展现状及分类 1.3 本论文组织结构介绍 2 相关技术介绍 2.1什么是搜索引擎 2.2 sqlserver数据库 2.3 Tomcat服务器 3 搜索引擎的基本原理 3.1搜索引擎的基本组成及其功能 3.2搜索引擎的详细工作流程 4 系统分析与…
阅读更多...
最新文章

Copyright @ 2022~2023