我的第一个前端项目，vue项目从零开始创建和运行

news2024/12/29 13:15:13

​入门前端，从基础做起，从零开始新建项目

背景：VUE脚手架项目是一个“单页面”应用，即整个项目中只有1个网页！
在VUE脚手架项目中，主要是设计各个“视图组件”，它们都是整个网页中某个部分，通过显示不同的若干个视图组件，以达到显示不同“页面”的效果！

一、环境创建

1. 安装Node.js：

前端项目通常使用Node.js作为JavaScript的运行环境和包管理工具。node.js官方网站 下载，下载适合你操作系统的LTS版本的Node.js
安装时直接下一步下一步就行了
在这里插入图片描述

安装Node.js后，你可以在操作系统的命令提示符下,执行以下命令即可：node -v命令检查安装是否成功。
在这里插入图片描述
此安装包会自动配置环境变量，可以用npm -v检查npm命令是否可用
在这里插入图片描述

2. 安装VUE Cli

安装VUE Cli的命令如下：npm install -g @vue/cli

此过程将从仓库服务器中下载VUE Cli，通常耗时30秒至5分钟左右。
提示：如果安装过程中的日志提示更新npm版本，或提示某些软件版本偏旧等，只要没有出现 ERROR字样，均可无视。
注意：以上操作仍需要管理权限才可以成功执行。

安装完成后，可通过以下命令vue -V检验VUE Cli是否安装成功：
在这里插入图片描述
注意：以上命令中的 -V 中的 V 是大写的。

二、vue项目创建

1.选择你创建项目的位置

如：E:\html_project 输入cmd，进入该目录的操作系统命令行
在这里插入图片描述

输入cmd效果
在这里插入图片描述
进入文件夹命令窗口
在这里插入图片描述

2. 输入命令新建vue项目

vue create 项目名 列如：vue create vue-project-01

输入以上指令后，按下 Enter 键将准备创建工程，创建过程可能耗时较长。
注意：1. 项目命名合规 1.按 Enter键，否则会自动选择后续各设置选项的默认项
在这里插入图片描述

3.项目vue创建成功

等待一会，项目创建成功，
提示你，可cd进入项目文件夹j-small-web
在这里插入图片描述

4.启动项目

运行命令npm run serve ,启动项目
在这里插入图片描述

5.运行查看

进入本地访问链接 http://localhost:8080/,查看效果：
在这里插入图片描述
项目内容
在这里插入图片描述

三、在VS Code中查看项目

1. 安装Visual Studio Code 开发软件

访问Visual Studio Code官方网站 并根据你的操作系统下载安装程序。
下载完成后，执行安装程序一步步安装。

2.打开项目

file>OpenFolder
在这里插入图片描述
选中项目文件夹，点击选中文件夹按钮,打开项目
在这里插入图片描述

3.VS中查看项目

主界面展示
在VUE脚手架项目中，主要是设计各个“视图组件”如:HelloWorld，它们都是整个网页中某个部分，通过显示不同的若干个视图组件，以达到显示不同“页面”的效果！
设计模式：VUE脚手架项目是一个“单页面”应用，即整个项目中只有1个网页！
在这里插入图片描述

4.VS中运行项目

在terminal中运行npm run serve 效果如下：
在这里插入图片描述

四. VUE脚手架的项目结构

VUE脚手架的项目结构为：

  • [node_modules]：当前项目使用到的依赖项的文件夹，不要手动管理此文件夹中的内容，如果项目中缺失此文件夹，或此文件夹中的部分必要内容，项目将无法启动，或无法正确运行，需要在终端窗口中，在当前项目文件夹下执行npm install命令，将自动下载当前项目所需的所有依赖项到此文件夹中

    • 此文件夹通常被配置到.gitignore文件中，所以，使用GIT仓库时，提交代码时此文件夹是不会提交的！同理，从GIT仓库拉取项目到本地时，拉取到的项目也不会包含此文件夹

  • [public]：静态资源文件夹，用于存放静态资源文件（例如.css、.js、图片等），此文件夹也是整个项目的资源根目录，此文件夹中的内容通过URL的 / 根路径来访问

    • favicon.ico：图标文件，是固定的文件名，如果你希望使用其它图标，可以使用新图标文件覆盖此文件（仍使用相同的文件名）
    • index.html：VUE脚手架项目中的唯一的网页文件，通常，不修改默认文件中的内容

  • [src]：项目的核心源代码文件所在的文件夹

    • [assets]：静态资源文件夹，此文件夹下的内容被使用时应该是相对固定的，不会随着程序的运行而发生变化的，例如你可以把网站的LOGO图片文件放在这里，但不应该把用户的头像图片放在这里
    • [components]：用于存放被其它视图组件调用的视图组件的文件夹
    • [router]：用于配置路由
      • index.js：默认的路由配置文件
    • [store]：用于配置全局的一些量
      • index.js：默认的配置全局的量的文件
    • [views]：用于存放视图组件的文件夹
    • App.vue：是默认会注入到index.html的视图组件，不要修改此文件的文件名
    • main.js：项目的主配置文件，通常，在安装了某些新的依赖项后，可能需要在此文件中添加一些配置

  • .gitignore：用于配置将哪些文件或文件夹忽略，不会提交到GIT仓库

  • bable.config.js：Bable的配置文件

  • jsconfig.json：JavaScript的基础配置文件

  • LICENSE：并不是VUE脚手架项目的必要文件，此文件是开源声明文件，当你的项目提交到GIT仓库并且设置为公开项目时，需要添加此文件

  • package.json：此项目的配置文件，主要配置了执行脚本（scripts属性）、项目的依赖项（dependencies属性）、开发时所需的依赖项（devDependencies属性），在不熟练的情况下，不要手动修改此文件中的内容

  • package-lock.json：是管理此项目时使用的、基于package.json自动生成的文件

  • README.md：是默认的项目的介绍文件，当你的项目提交到GIT仓库，大部分GIT仓库服务器都会你的项目的首页显示此文件的内容，当你需要编写此文件时，应该明确写出：此项目应该如何打开、如果启动、如果部署，及相关的注意事项等

  • vue.config.js：Vue的基础配置文件

创造价值，乐哉分享！

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

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

相关文章

Python如何生成个性二维码

Python如何生成个性二维码

Python-生成个性二维码 一、问题描述 通过调用MyQR模块来实现生成个人所需二维码。 安装： pip install myqr 二、代码实现 1.普通二维码 from MyQR import myqr # 普通二维码 myqr.run(wordshttp://www.csdn.net/mayi0312,save_nameqrcode.png ) 效果图&#…
阅读更多...
学习录

学习录

概述 这几年在迷茫中看了不少资料，有觉得写得很棒的，也有写的很糟糕的。所以一直想写这块的总结来进行归纳，同时也希望能给其他处于迷茫中的朋友提供一份高质量的资料列表(也许一个读者也没有)，以下清单个人觉得值得反复看以及思…
阅读更多...
利用ChatGLM3构建Prompt实现Text2SQL

利用ChatGLM3构建Prompt实现Text2SQL

之前使用ChatGLM3的自定义工具实现了查询MySQL数据库，但感觉功能还是比较受限。 https://blog.csdn.net/weixin_44455388/article/details/135270879?spm1001.2014.3001.5501 使用ChatGLM3实现Text2SQL 前言Text2SQL的构建第一阶段：SQL脚本构建&#xf…
阅读更多...
听GPT 讲Rust源代码--compiler(32)

听GPT 讲Rust源代码--compiler(32)

File: rust/compiler/rustc_middle/src/middle/exported_symbols.rs 在Rust的源代码中，rust/compiler/rustc_middle/src/middle/exported_symbols.rs文件的作用是实现编译器中处理导出符号的功能。 该文件中定义了一些结构体和枚举，用于描述导出符号的信…
阅读更多...
MySQL 存储引擎和索引类型介绍

MySQL 存储引擎和索引类型介绍

1. 引言 MySQL 是一个流行的关系型数据库管理系统，提供多种存储引擎以满足不同的业务需求。本文将介绍几种常见的 MySQL 存储引擎和索引类型比较，并给出相应的示例。 2. 存储引擎概述 2.1 InnoDB 存储引擎 InnoDB 是 MySQL 的默认存储引擎&#xff0…
阅读更多...
向量数据库:usearch的简单使用+实现图片检索应用

向量数据库:usearch的简单使用+实现图片检索应用

usearch的简单使用 usearch是快速开源搜索和聚类引擎，用于C、C、Python、JavaScript、Rust、Java、Objective-C、Swift、C#、GoLang和Wolfram 🔍中的向量和🔜字符串 // https://github.com/unum-cloud/usearch/blob/main/python/README.md …
阅读更多...
解决ImportError: Failed to import test module: sys.__init__

解决ImportError: Failed to import test module: sys.__init__

解决ImportError: Failed to import test module: sys.init 背景 学习通过文件夹执行测试脚本时，出现了错误：ImportError: Failed to import test module: sys.__init__ 解决过程 根据报错信息：sys is not a package大胆猜测可能是文件名…
阅读更多...
【MySQL】数据库之MMM高可用

【MySQL】数据库之MMM高可用

目录 一、什么是MMM 二、关于MMM架构的说明 三、实操MMM的高可用 步骤一：完成主主复制、主从复制 步骤二：所有节点服务器都安装mysql-mmm,并完成mmm_common.conf文件的配置 步骤三：完成monitor节点服务器的配置文件修改mmm_mon.conf 步…
阅读更多...
SpringCloud系列篇：入门讲解Spring Cloud是什么

SpringCloud系列篇：入门讲解Spring Cloud是什么

🥳🥳Welcome Huihuis Code World ! !🥳🥳 接下来看看由辉辉所写的关于SpringCloud的相关操作吧 目录 🥳🥳Welcome Huihuis Code World ! !🥳🥳 一.Spring Cloud是什么 二.Spring …
阅读更多...
家里有必要买NAS吗？

家里有必要买NAS吗？

完全没有必要，因为用旧电脑搭建NAS不仅价格实惠，而且非常简单，效果也完全不差买了的！ 并且......还环保 教程链接： 用旧电脑搭建NAS在您的家庭中，通过将旧 PC 转变为NAS服务器，您可以轻松搭建…
阅读更多...
Ubuntu 虚拟机挂接 Windows 目录

Ubuntu 虚拟机挂接 Windows 目录

Windows 共享目录 首先 Windows 下共享目录 我这里偷懒直接直接 Everyone ，也可以指定用户啥的 Ubuntu 挂接 挂接命令，类似如下： sudo mount -o usernamefananchong,passwordxxxx,uid1000,gid1000,file_mode0644,dir_mode0755,dynperm //…
阅读更多...
04set注入专题/简单类型/数组/List/Set/Map/空字符串/null/特殊符号

04set注入专题/简单类型/数组/List/Set/Map/空字符串/null/特殊符号

1.1注入外部Bean 在之前使用的案例就是注入外部Bean的方式。 <!-- class属性声明要管理哪个类中的对象 property标签的name是提示set方法名ref标签指明注入的bean的id--><bean id"userServiceBean" class"com.powernode.spring6.service.UserService…
阅读更多...
WorkPlus支持平台级定制，助理企业自主掌控业务和生态

WorkPlus支持平台级定制，助理企业自主掌控业务和生态

在数字化时代&#xff0c;企业越来越需要满足自身特性和需求的定制化解决方案。WorkPlus不同于企业微信、钉钉和飞书&#xff0c;它支持平台级的定制服务&#xff0c;完全掌控自身数字化进程。WorkPlus可根据企业的安全特性、强可控要求和高定制化场景&#xff0c;提供原厂平台…
阅读更多...
基于 HTTPS 协议配置 Git 连接 GitHub

基于 HTTPS 协议配置 Git 连接 GitHub

文章目录 0.安装 Git1.注册 GitHub 账号2.配置 Git 的用户名和邮箱3.远程连接 GitHub 有两种传输协议4.基于 SSH 协议配置 Git 连接 GitHub5.基于 HTTPS 协议配置 Git 连接 GitHub5.1 创建 GitHub 个人访问令牌5.2 有两种方法将本地仓库和远程仓库关联起来5.2.1 第一种方法&…
阅读更多...
位运算--二进制中1的个数（含常见的二进制运算操作）

位运算--二进制中1的个数（含常见的二进制运算操作）

目录 二进制中1的个数操作 1 查看第k位的数字是否为1操作2 lowbit操作 解题代码&#xff1a; 原题链接: 二进制中1的个数 给定一个长度为 n 的数列&#xff0c;请你求出数列中每个数的二进制表示中 1 的个数。 输入格式 第一行包含整数 n 。 第二行包含 n 个整数&#xff0c…
阅读更多...
Turn.js 实现翻书效果

Turn.js 实现翻书效果

接到了任务&#xff0c;要把孩子画的画放到网页上去&#xff0c;翻页效果还要逼真一点。搜索到了turn.js这个前端翻页组件&#xff0c;效果不错。先上图看效果。 网页实际效果&#xff1a;星月夜诗集 turn.js的官网地址&#xff1a;Turn.js: The page flip effect in HTML5 …
阅读更多...
STM32_HAL Freertos按键控制LED

STM32_HAL Freertos按键控制LED

设置GPIO引脚 根据电路图&#xff0c;K0为用户按键&#xff0c;连接在PA0引脚&#xff0c;当K0按下时接地&#xff0c;引脚电平低电平。在CubeMX中设置PA0&#xff0c;将IO设置为输入&#xff0c;上拉&#xff08;上拉外部悬空时&#xff0c;引脚为高电平&#xff09;。 添…
阅读更多...
【Linux】Linux基础之权限

【Linux】Linux基础之权限

目录 一、Linux中的用户1.1 用户之间的身份切换1.2 指令提权 二、权限管理2.1 文件权限2.2 权限操作2.3 chown和chgrp 三、文件类型四、目录文件的权限操作五、权限掩码六、粘滞位 一、Linux中的用户 Linux中主要有两种用户&#xff1a; root&#xff0c;超级用户非root&…
阅读更多...
x-cmd pkg | trdsql - 能对 CSV、LTSV、JSON 和 TBLN 执行 SQL 查询的工具

x-cmd pkg | trdsql - 能对 CSV、LTSV、JSON 和 TBLN 执行 SQL 查询的工具

目录 简介首次用户技术特点竞品和相关作品进一步阅读 简介 trdsql 是一个使用 sql 作为 DSL 的强大工具: 采用 SQL 对 CSV、LTSV、JSON 和 TBLN 文件执行查询与 MySQL&#xff0c;Postgresql&#xff0c;Sqlite 的 Driver 协同&#xff0c;可以实现对应数据库的表与文件的 JO…
阅读更多...
Python Asyncio网络编程方法全面解析与实战应用！

Python Asyncio网络编程方法全面解析与实战应用！

更多Python学习内容&#xff1a;ipengtao.com Python的asyncio库是一种强大的异步编程工具&#xff0c;它使得编写高效的网络应用程序变得更加容易。在本文中&#xff0c;我们将深入探讨使用asyncio进行网络编程的方法&#xff0c;包括异步IO、协程、事件循环等方面的内容&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023