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

news2024/11/16 17:07:08

目录

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.json 的 scripts 中，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.coloradmin.cn/o/1883183.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

php 通过vendor文件 生成还原最新的composer.json

php 通过vendor文件 生成还原最新的composer.json

起因&#xff1a;因为历史原因&#xff0c;在本项目中composer.json基本算废了&#xff0c;没法直接使用composer管理扩展&#xff0c;今天尝试修复一下composer.json。 历史文件&#xff0c;可以看出来已经很久没有维护了&#xff0c;我们主要是恢复require的信息 {"na…
阅读更多...
Linux4(Docker)

Linux4(Docker)

目录 一、Docker介绍 二、Docker结构 三、Docker安装 四、Docker 镜像 五、Docker 容器 六、Docker 安装nginx 七、Docker 中的MySQL部署 一、Docker介绍 Docker&#xff1a;是给予Go语言实现的开源项目。 Docker的主要目标是“Build,Ship and Run Any App,Anywhere” 也…
阅读更多...
ROS2用c++开发参数节点通信

ROS2用c++开发参数节点通信

1.创建节点 cd chapt4/chapt4_ws/ ros2 pkg create example_parameters_rclcpp --build-type ament_cmake --dependencies rclcpp --destination-directory src --node-name parameters_basic --maintainer-name "joe" --maintainer-email "1027038527qq.com&…
阅读更多...
Spring Security 认证流程

Spring Security 认证流程

Spring Scurity是spring生态下用于认证和授权的框架&#xff0c;具有高度的灵活性和可扩展行&#xff0c;本节主要对Spring Security的认证过程中进行概括性的介绍&#xff0c;主要介绍在该过程中&#xff0c;会涉及到哪些组件以及每个组件所承担的职责&#xff0c;希望大家可以…
阅读更多...
数据驱动测试DDT之Selenium读取Excel文件

数据驱动测试DDT之Selenium读取Excel文件

&#xff08;1&#xff09;安装xlrd pip3 install xlrd &#xff08;2&#xff09;示例脚本 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 ​import pytest import xlrd def get_data(): filename"F:\\学习\\自动化测试\\selenium自动化…
阅读更多...
OpenStack开源虚拟化平台（一）

OpenStack开源虚拟化平台（一）

目录 一、OpenStack背景介绍&#xff08;一&#xff09;OpenStack是什么&#xff08;二&#xff09;OpenStack的主要服务 二、计算服务Nova&#xff08;一&#xff09;Nova组件介绍&#xff08;二&#xff09;Libvirt简介&#xff08;三&#xff09;Nova中的RabbitMQ解析 OpenS…
阅读更多...
简单配置VScode轻量级C++竞赛环境

简单配置VScode轻量级C++竞赛环境

1. 安装拓展 Chinese是中文&#xff0c;需要重启才可以运行&#xff0c;C/C拓展只是进行语法代码提示&#xff0c;不需要进行任何配置修改&#xff0c;默认即可。 2. 创建文件 C是工作文件夹&#xff0c;.vscode是配置文件夹&#xff0c;里面建一个tasks.json文件&#xff0c;…
阅读更多...
Canvas 指纹：它是什么以及如何绕过它

Canvas 指纹：它是什么以及如何绕过它

什么是 Canvas 指纹&#xff1f; 网络浏览器在执行其功能时会收集各种信息。当这些信息中的某些被用于识别网站用户时&#xff0c;这被称为浏览器指纹。 浏览器指纹包括以下有关浏览器的信息&#xff1a;设备型号、浏览器类型和版本、操作系统 (OS)、屏幕分辨率、时区、p0p 文…
阅读更多...
PC系统安装引导：2、进入维护环境

PC系统安装引导：2、进入维护环境

目录 &#x1f345;点击这里查看所有博文 闲来无事&#xff0c;记录下自己以往多年总结出的一套系统维护的方法。以供有需要的人学习使用。例如&#xff0c;系统崩溃了无法启动怎么办&#xff0c;如何重做系统&#xff0c;如何安装双系统&#xff0c;如何引导多系统&#xff0…
阅读更多...
告别地推烦恼，Xinstall智能推广系统，让APP推广更高效！

告别地推烦恼，Xinstall智能推广系统，让APP推广更高效！

在移动互联网时代&#xff0c;APP的推广与运营成为了每个开发者必须面对的问题。地推作为一种传统的推广方式&#xff0c;虽然有着其独特的优势&#xff0c;但也面临着诸多挑战。如何在地推中脱颖而出&#xff0c;实现高效推广&#xff1f;今天&#xff0c;我们就来聊聊Xinstal…
阅读更多...
5个让页面“活“起来的CSS特效

5个让页面“活“起来的CSS特效

大家好,欢迎来到程序视点。 随着越来越多的浏览器对CSS3支持的不断完善&#xff0c;设计师和开发者们有了更多的选择去实现一些炫酷特效。这里整理了最近项目中使用到的5个比较实用的CSS3动画演示。让我们一起看看CSS3是如何让页面秀起来的。 3D倒影翻转 超炫酷3D倒影翻转动…
阅读更多...
某安全公司DDoS攻击防御2024年6月报告

某安全公司DDoS攻击防御2024年6月报告

引言&#xff1a; 在2024年6月&#xff0c;网络空间的安全挑战汹涌澎湃。分布式拒绝服务&#xff08;DDoS&#xff09;攻击频发&#xff0c;针对云服务、金融科技及在线教育平台的精密打击凸显出当前网络威胁环境的严峻性。 某安全公司作为网络安全防护的中坚力量&#xff0c…
阅读更多...
chunkers/maxent_ne_chunker/english_ace_multiclass.pickle 找不到

chunkers/maxent_ne_chunker/english_ace_multiclass.pickle 找不到

首先在这个nltk_data &#xff1a; NLTK Data官方下的数据集&#xff0c;找不到english_ace_multiclass.pic 说明缺少这个文件 : 那么在 nlp/resources/chunkers/maxent_ne_chunker/english_ace_multiclass.pickle at master teropa/nlp (github.com) 下载那两个文件 : 然…
阅读更多...
C++专业面试真题（1）学习

C++专业面试真题（1）学习

常用Linux命令 ls&#xff1a;列出当前目录内容 ls -l&#xff1a;详细信息列表 ls -a&#xff1a;包括隐藏文件 cd&#xff1a;更改目录 pwd&#xff1a;显示当前目录路径 mkdir&#xff1a;创建新目录 rmdir&#xff1a;删除空目录 rm&#xff1a;删除文件或目录 rm -…
阅读更多...
拒绝胶感，清纯甜美邻家女孩！逼真！逼真！SD1.5 更适合初恋般的国产真人大模型—— CNrealisticMIXV40

拒绝胶感，清纯甜美邻家女孩！逼真！逼真！SD1.5 更适合初恋般的国产真人大模型—— CNrealisticMIXV40

老铁说看惯了AI艺术大片&#xff0c;想寻找适合生成邻家女孩青涩照片的模型。老徐今天应邀&#xff0c;针对邻家女孩青涩风格进行下尝试。老徐此前推荐过一款支持各种真实&#xff0c;摄影&#xff0c;写实风格模型的合体模型——赛博Dream | CNrealistic_MIX_V40无损修剪版。 …
阅读更多...
Open3D 点云快速全局配准FGR算法（粗配准）

Open3D 点云快速全局配准FGR算法（粗配准）

目录 一、概述 1.1原理和步骤 1.2关键技术和优势 1.3应用场景 二、代码实现 2.1 关键代码 2.1.1.函数&#xff1a;execute_fast_global_registration 2.1.2调用registration_fgr_based_on_feature_matching函数 2.2完整代码 三、实现效果 3.1原始点云 3.2粗配准后点…
阅读更多...
03 _ 类型基础（2）：动态类型与静态类型

03 _ 类型基础（2）：动态类型与静态类型

静态类型语言与动态类型语言 通俗定义 静态类型语言&#xff1a;在编译 阶段确定所有变量的类型 动态类型语言&#xff1a;在执行阶段确定所有变量的类型 Javascript 与 C 对比 静态类型与动态类型对比 其他定义 强类型语言&#xff1a;不允许程序在发生错误后继续执行 语…
阅读更多...
【小贪】项目实战——Zero-shot根据文字提示分割出图片目标掩码

【小贪】项目实战——Zero-shot根据文字提示分割出图片目标掩码

目标描述 给定RGB视频或图片&#xff0c;目标是分割出图像中的指定目标掩码。我们需要复现两个Zero-shot的开源项目&#xff0c;分别为IDEA研究院的GroundingDINO和Facebook的SAM。首先使用目标检测方法GroundingDINO&#xff0c;输入想检测目标的文字提示&#xff0c;可以获得…
阅读更多...
primetime中cell和net的OCV

primetime中cell和net的OCV

文章目录 前言一、Cell OCV1. POCV coefficient file2. POCV Slew-Load Table in Liberty Variation Format&#xff08;LVF lib&#xff09; 二、Net OCV三、如何check OCV是否已加上&#xff1f;总结 前言 在生产中&#xff0c;外界环境的各种变化&#xff0c;比如PVT&#…
阅读更多...
grpc学习golang版（ 六、服务器流式传输 ）

grpc学习golang版（ 六、服务器流式传输 ）

系列文章目录 第一章 grpc基本概念与安装 第二章 grpc入门示例 第三章 proto文件数据类型 第四章 多服务示例 第五章 多proto文件示例 第六章 服务器流式传输 第七章 客户端流式传输 第八章 双向流示例 文章目录 一、前言二、定义proto文件三、拷贝任意文件进项目四、编写serve…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023