前端——在本地搭建Vue单页应用

目录

1、安装最新node.js

2、打开命令行窗口

3、进入要保存项目的目录下

4、安装 Vue CLI

5、创建新项目,选择功能

5.1 新建项目

5.2 Please pick a preset

5.3 Check the features needed for your project

5.4 Choose a version of Vue.js

5.5 Use history mode for router?

5.6 Pick a linter/formatter config

5.7 Save this as a preset for future projects?

5.8 Lint on save

5.9 In package.json

6、使用webstorm打开创建好的项目,进行编写

7、启动开发服务器

8、将应用发布到生产环境

9、Vue项目结构


1、安装最新node.js

2、打开命令行窗口

  • 快捷键:windows+R,输入“cmd”,打开命令行窗口

3、进入要保存项目的目录下

4、安装 Vue CLI

  • Vue CLI 是一个官方提供的工具,用于快速搭建和管理 Vue 项目
  • 此命令执行一次就行了,不必每次创建新项目时都执行一次
    • npm install -g @vue/cli
      
  •  检查是否安装成功

5、创建新项目,选择功能

5.1 新建项目

  • vue create <project-name>

5.2 Please pick a preset

  • 创建 Vue 3 项目,并且希望使用默认配置,选择 Default ([Vue 3] babel, eslint)
  • 创建 Vue 2 项目,则选择 Default ([Vue 2] babel, eslint)
  • 自定义配置,则选择 Manually select features,然后按照提示逐步选择所需的功能和工具。

5.3 Check the features needed for your project

  • 选项功能:
    • (*) Babel: 使用 Babel 来转译 JavaScript 代码,以确保你可以使用最新的 JavaScript 特性,并兼容不同的浏览器。
    • ( ) TypeScript: 是否使用 TypeScript 作为项目的编程语言。TypeScript 是 JavaScript 的一个超集,添加了静态类型检查的功能。
    • ( ) Progressive Web App (PWA) Support: 是否启用渐进式 Web 应用(PWA)的支持,这允许你将网站转变为一个可离线访问的应用。
    • ( ) Router: 是否使用 Vue Router 来实现单页面应用(SPA)的路由功能,用于页面之间的导航。
    • ( ) Vuex: 是否使用 Vuex 来管理应用的状态,特别是对于较大型的 Vue 应用程序。
    • ( ) CSS Pre-processors: 是否需要支持 CSS 预处理器,如 Sass 或 Less,来增强 CSS 的编写和管理能力。
    • (*) Linter / Formatter: 是否启用代码规范检查和格式化工具,如 ESLint。这有助于保持代码风格的一致性,并捕捉一些常见的代码错误。
    • ( ) Unit Testing: 是否需要单元测试框架,用于测试应用程序中的各个单元(组件、函数等)。
    • ( ) E2E Testing: 是否需要端到端(E2E)测试框架,用于模拟用户在应用程序中的实际操作和场景。
  • 如何选择:

    • 使用空格键选择你需要的功能。
    • 使用 a 键来全选所有功能。
    • 使用 i 键来反转选择,即未选择的变为选择,已选择的变为未选择。
    • 按下回车键(Enter)确认你的选择并继续设置下一步。
  • 多数情况下,至少应该选择 Babel 和 Linter / Formatter 来确保项目的基本质量和跨浏览器兼容性。其余的选择则根据项目的规模、复杂性和开发团队的技术栈来决定。

5.4 Choose a version of Vue.js

  • 选择vue3,最新版本

5.5 Use history mode for router?

  • 是否使用历史模式(history mode)来管理路由?(在生产环境中需要正确设置服务器以支持索引回退)

    历史模式(history mode)哈希模式(hash mode) 是 Vue Router 提供的两种不同的路由模式:

  • 哈希模式

    • 默认模式,使用 URL 的 hash(#)来模拟一个完整的 URL,例如 http://example.com/#/about
    • 不需要特殊的服务器配置,可以直接在所有服务器环境中使用。
  • 历史模式

    • 使用 HTML5 History API 来管理路由,URL 看起来像正常的 URL,例如 http://example.com/about
    • 这种模式在视觉上更加清晰,但是在生产环境中需要服务器的支持。具体来说,需要服务器配置来确保当用户刷新页面或直接访问某个 URL 时,服务器能够正确地回退到你的应用的入口点(通常是 index.html 文件),而不是返回 404 错误。
  • 服务器配置

  • 当你使用历史模式时,服务器需要配置,以确保在任何路由路径下刷新页面时,能够正确地加载你的单页面应用(SPA)。这通常涉及配置服务器以将所有路径都重定向到你的入口文件(例如 index.html),然后让前端路由接管处理页面的加载和路由切换。

5.6 Pick a linter/formatter config

  • 这些选项是关于代码规范检查和格式化工具 ESLint 的不同配置选项

  • ESLint with error prevention only:

    • 这个选项只会配置 ESLint 来检测并阻止可能导致错误的代码模式,但不会强制统一的代码风格或格式。
    • 适用场景:适合对代码风格没有特别要求,但希望确保代码质量和错误检测的项目。
  • ESLint + Airbnb config:

    • 使用 Airbnb 公司开发的 JavaScript 代码风格和最佳实践配置。Airbnb 的配置非常严格,包括了很多规则和约定,旨在提高代码质量和可维护性。
    • 适用场景:适合大多数项目,特别是团队较大或者想要使用流行的标准化配置来确保代码质量和一致性的项目。
  • ESLint + Standard config:

    • 使用 Standard 配置,这也是另一种流行的 JavaScript 代码风格和规范。Standard 风格比 Airbnb 更加简洁,通常更容易上手。
    • 适用场景:适合希望使用简单、直接的代码风格和规范的项目。
  • ESLint + Prettier:

    • 这个选项会集成 ESLint 和 Prettier。ESLint 负责代码质量和错误检查,而 Prettier 负责代码的格式化。
    • 适用场景:适合希望代码风格和格式化都能得到管理的项目。Prettier 提供了强大的自动格式化功能,能够保持整个团队的代码风格一致。

5.7 Save this as a preset for future projects?

  • 是否要保存为这个项目作为一个模板保存?

5.8 Lint on save

5.9 In package.json

创建成功


6、使用webstorm打开创建好的项目,进行编写

7、启动开发服务器

  • 如果在 package.jsonscripts 中,dev 脚本依赖于某些模块或者工具,那么在第一次运行或者更新依赖后,确实需要运行 npm install 来确保依赖的包已经安装到本地的 node_modules 目录中。
  • 当你已经安装了所有依赖,并且没有新增或更新依赖时,通常直接运行 npm run dev 就可以启动开发环境了,因为依赖已经存在于本地的 node_modules 中。
npm run dev

访问网址:http://127.0.0.1:5173/index

8、将应用发布到生产环境

  • 当你运行 npm build 时,Vue CLI 会启动其构建服务,根据你项目中的配置(如 vue.config.js 文件)来进行构建,生成最终的构建文件供部署使用。
  • 此命令会在 ./dist 文件夹中为你的应用创建一个生产环境的构建版本。 把dist文件夹的东西复制粘贴到后端项目的resources/static目录下,连接前后端……(此处涉及到前后端分离的知识,另说)
npm build

 

9、Vue项目结构

my-vue-app/
├── node_modules              # 项目的所有依赖包
├── public/                  # 静态资源目录
│   ├── index.html           # 入口 HTML 文件
│   └── ...
├── src/                     # 源代码目录
│   ├── assets/              # 静态资源如图片、字体等
│   ├── components/          # Vue 组件
│   ├── views/               # 页面视图组件
│   ├── router/              # 路由配置
│   ├── store/               # Vuex 状态管理
│   ├── services/            # 后端 API 服务
│   ├── styles/              # 全局样式
│   ├── utils/               # 工具函数
│   ├── App.vue              # 根组件
│   └── main.js              # 入口 JS 文件
├── tests/                   # 测试文件目录
├── .eslintrc.js             # ESLint 配置文件
├── .babelrc                 # Babel 配置文件
├── .gitignore               # 指定了 Git 在版本控制中忽略的文件和目录
├── babel.config.js          # 编译器Babel的配置
├── package.json             # npm 包管理文件
├── README.md                # 项目说明文件
├── vue.config.js            # 自定义 Vue CLI 的配置

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/38746.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

优化数据库字段使用位运算-php语言示例

背景&#xff1a;一个会员有三个状态&#xff0c;A、B、C&#xff0c;其中一个人可以为 A、B、C、AB&#xff1b;之前数据表结构加了三个字段is_a、is_b、is_c; 本人实在不想这样粗糙的实现需求&#xff0c;遂决定用位运算优化。 上代码&#xff1a; 位运算可以用来处理状态值…

探索SOLIDWORKS 2024设计增强功能

随着技术的不断进步和市场的日益竞争&#xff0c;工程设计和制造行业对于快捷、准确和创新的工具需求日益增长。SOLIDWORKS作为3D CAD设计软件&#xff0c;一直致力于为用户提供更强大、更便捷的设计工具。SOLIDWORKS 2024的发布&#xff0c;再次证明了其在设计增强功能方面的持…

使用 Amazon Bedrock Converse API 简化大语言模型交互

本文将介绍如何使用 Amazon Bedrock 最新推出的 Converse API&#xff0c;来简化与各种大型语言模型的交互。该 API 提供了一致的接口&#xff0c;可以无缝调用各种大型模型&#xff0c;从而消除了需要自己编写复杂辅助功能函数的重复性工作。文中示例将展示它相比于以前针对每…

批量文件名修改软件:一键解决同一编码多型号文件分类与命名难题,高效管理文件

在数字化时代&#xff0c;图片文件已经成为我们工作中不可或缺的一部分。然而&#xff0c;当面对成百上千个同一编码下不同型号的图片文件时&#xff0c;如何快速、准确地进行分类和命名&#xff0c;成为了许多职场人士头疼的问题。现在&#xff0c;我们为您带来了一款神奇的批…

MyBatisPlus 基础数据表的增删改查 入门 简单查询

MyBatisPlus MyBatisPlus&#xff08;简称MP&#xff09;是一个基于MyBatis的增强工具库&#xff0c;简化了MyBatis的开发&#xff0c;提供了很多实用的功能和特性&#xff0c;如自动生成SQL、通用CRUD操作、分页插件、条件构造器、代码生成器等。它不仅简化了开发过程&#x…

优盘有盘符显示0字节:故障解析与数据恢复策略

一、优盘有盘符显示0字节现象描述 在使用优盘的过程中&#xff0c;我们有时会遇到一种令人困惑的情况&#xff1a;插入优盘后&#xff0c;电脑能正常识别到优盘的盘符&#xff0c;但当我们尝试访问其中的数据时&#xff0c;却发现优盘的容量显示为0字节&#xff0c;无法读取或…

Sui创始团队在竞速环节中的快问快答

在Sui Basecamp活动期间&#xff0c;Sui区块链的最初贡献者在Oracle红牛赛车模拟器上展示了他们的技术能力&#xff0c;在驾驶圈时回答了有关Sui的问题。 Evan Cheng&#xff08;又名Revvin’ Evan&#xff09;在解释Mysticeti创下区块链最终性记录的同时保持着他的驾驶线路。…

Java | Leetcode Java题解之第200题岛屿数量

题目&#xff1a; 题解&#xff1a; class Solution {void dfs(char[][] grid, int r, int c) {int nr grid.length;int nc grid[0].length;if (r < 0 || c < 0 || r > nr || c > nc || grid[r][c] 0) {return;}grid[r][c] 0;dfs(grid, r - 1, c);dfs(grid, r…

go Channel原理 (三)

Channel 设计原理 不要通过共享内存的方式进行通信&#xff0c;而是应该通过通信的方式共享内存。 在主流编程语言中&#xff0c;多个线程传递数据的方式一般都是共享内存。 Go 可以使用共享内存加互斥锁进行通信&#xff0c;同时也提供了一种不同的并发模型&#xff0c;即通…

mysql8.0.19安装zip版本

下载地址https://downloads.mysql.com/archives/community/ 下载版本 下载后解压&#xff0c;不包括data 和my.ini文件。其中data 文件是自动生成的【mysqld --initialize --console】&#xff0c;my.ini需要自己编写设置。 新建my.ini文件 需要自己设置 basedirG:\soft\mysql…

内网服务器时间校正

新购买的云服务器发现内网机器和可以访问外网的机器时间慢了三分钟&#xff0c;导致有些访问会报错&#xff0c;那么我们配置一下ntp校正一下时间。外网配置起来比较简单&#xff0c;直接下载ntp执行校正命令即可。 比当前时间慢了三分钟 注意当前服务器是可以访问外网的机器这…

【gitee使用教程】(创建项目仓库并上传代码简易版)

gitee使用教程&#xff0c;创建项目仓库并上传代码简易版 1.在码云上创建一个仓库2.将代码克隆到本地1.复制仓库地址2.找到你想要放置的文件位置&#xff0c;右键点击更多选项&#xff0c;选择Git Clone3.将复制的仓库地址填入URL 3. IDEA结合GIT和Gitee的简单使用idea需要识别…

【python】最新版抖音s逆向拿到数据,非常详细教程(附完整代码)

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全…

Excel 宏录制与VBA编程 ——VBA编程技巧篇一 (Union方法、Resize方法、Cells方法、UseSelect方法、With用法)

Uniom方法 使用Union方法可以将多个非连续区域连接起来成为一个区域&#xff0c;从而可以实现对多个非连续区域一起进行操作。 Resize方法 使用Range对象的Resize属性调整指定区域的大小&#xff0c;并返回调整大小后的单元格区域。 Cells方法 Cells属性返回一个Range对象。 Us…

Domino应用中的HTML5

大家好&#xff0c;才是真的好。 在xpages多年不见有效更新&#xff0c;前景不明的时候&#xff0c;Domino传统Web应用开发方式还是受到了应有的青睐。毕竟&#xff0c;在Nomad Web时代&#xff0c;连最传统的Notes CS原生应用也突然焕发了勃勃生机一样。 但&#xff0c;对有…

ARP 原理详解 一

ARP 原理 ARP&#xff08;Address Resolution Protocol&#xff09;地址解析协议&#xff0c;是根据 IP 地址获取物理地址的一个 TCP/IP 协议。 OSI 网络七层模型中&#xff0c;IP 地址在 OSI 模型第三层&#xff0c;MAC 地址在第二层&#xff0c;彼此不直接通信。 在通过以…

性能测试中的场景设计和测试执行

假设一个内部系统要求响应时间在 3s 以内&#xff0c;支持最大用户数为4万。根据二八原则&#xff0c;80%用户在20%时间使用系统(4w80%)/(24h20%)≈1.9点击/秒。并发数TPS&#xff08;运行时间思考时间&#xff09;1.9&#xff08;30.50.330.50.30.53&#xff09;21。 注意&am…

Flutter循序渐进==>数据结构(列表、映射和集合)和错误处理

导言 填鸭似的教育确实不行&#xff0c;我高中时学过集合&#xff0c;不知道有什么用&#xff0c;毫无兴趣&#xff0c;等到我学了一门编程语言后&#xff0c;才发现集合真的很有用&#xff1b;可以去重&#xff0c;可以看你有我没有的&#xff0c;可以看我有你没有的&#xf…

毫米波雷达深度学习技术-1.7训练一个神经网络

1.7 训练一个神经网络 对于训练神经网络&#xff0c;有两个步骤&#xff0c;即前向传递和误差反向传播。 1.7.1 前向传播和反向传播 在前向传递中&#xff0c;输入被馈送到模型并与权重向量相乘&#xff0c;并为每一层添加偏差以计算模型的输出。密集层或全连接层第l层的输入、…

网络基础-RIP协议

RIP&#xff08;Routing Information Protocol&#xff09;是一个基于距离矢量的动态路由协议&#xff0c;常用于小型到中型网络。RIP是较早的路由协议之一&#xff0c;具有简单易用的特点。以下是关于RIP协议的详细介绍&#xff1a; RIP的主要特点 ①使用跳数&#xff08;ho…