vue3项目 文件组成

从头捋顺一遍vue3项目文件目录

  • 前置知识
    • JS模块化
    • 什么是依赖?
    • 安装依赖
    • webpack能做什么?
    • vue基本使用
  • 不借助vue-cli,从0开始搭建vue项目。
    • index.html、main.js、App.vue
    • 引入npm
    • 引入webpack
    • 引入babel
    • 引入vue-loader
    • webpack配置
    • webpack配置

前置知识

JS模块化

在js刚刚出现的时候,是为了实现一些简单的功能,但随着浏览器的不断发展,js越来越被重视起来,可以实现较为复杂的功能。这个时候开发者为了维护方便,会把不同功能的模块抽离出来写入单独的js文件,但是当项目更为复杂的时候,html可能会引入很多个js文件,而这个时候就会出现命名冲突,污染作用域等一系列问题,这个时候模块化的概念及实现方法应运而生。

什么是依赖?

简单来说,就是我们的项目需要用到的其他的代码库或者模块,比如jQuery,React,Bootstrap等等。这些依赖可以帮助我们实现一些常用的功能,或者提供一些优秀的设计和交互。

但是,如果我们要手动下载和管理这些依赖,那么就会非常麻烦和耗时。所以,我们需要使用一些专门的工具来帮助我们自动化地安装和更新依赖,这就是我们要介绍的内容。目前,前端开发中最常用的两个依赖管理工具是npm和yarn。

安装依赖

https://www.w3cschool.cn/article/74549379.html

npm是Node.js的默认包管理器,它已经随着Node.js一起安装在了我们的电脑上。要使用npm来安装依赖,我们只需要在项目根目录下创建一个package.json文件,或者使用npm init -y命令来自动生成一个。然后,在package.json文件中的dependencies或者devDependencies字段中添加我们需要的依赖名称和版本号。

添加好了依赖之后,我们就可以在项目根目录下运行npm install命令来安装所有的依赖。这个命令会根据package.json文件中的信息,在项目中创建一个node_modules文件夹,并且把所有的依赖下载到这个文件夹中。同时,它还会生成一个package-lock.json文件,用来记录每个依赖的确切版本号和来源。这样可以保证我们在不同的环境中安装相同的依赖。

注意, package.json 里两个重要的属性相关:dependencies 以及 devDependencies。dependencies和devDependencies的区别是,前者是我们项目运行时需要的依赖,后者是我们项目开发时需要的依赖。一般来说,我们把一些打包,编译,测试等工具放在devDependencies中,把一些UI库,框架等放在dependencies中。

webpack能做什么?

把很多文件打包整合到一起, 缩小项目体积, 提高加载速度

(功能:如less/sass -> css,ES6/7/8 -> ES5 处理js兼容,支持js模块化,处理css兼容性,html/css/js -> 压缩合并)

vue基本使用

如果要使用vue,就要先安装。

以vue2为例,可以直接用script标签引入、CDN、NPM。

官网 https://v2.cn.vuejs.org/v2/guide/installation.html#%E7%9B%B4%E6%8E%A5%E7%94%A8-lt-script-gt-%E5%BC%95%E5%85%A5

以vue3为例,可以 ① npm create vue@latest ② CDN

https://cn.vuejs.org/guide/quick-start.html

至此,我们可以在html中使用vue做一些小demo。但是无法完成大型项目。 所以引入了SFC单页面组件、vue-cli、vite来构造大型项目。

不借助vue-cli,从0开始搭建vue项目。

参考视频 https://www.bilibili.com/video/BV1dt4y1K7BF/?spm_id_from=333.788&vd_source=ceab44fb5c1365a19cb488ab650bab03

使用vue-cli直接生成的项目文件很多,我们这里不借助vue-cli,从0开始搭建vue项目。

index.html、main.js、App.vue

创建应用,应用需要根组件App.vue,应用挂载在HTML(#app)上。

官方文档 https://cn.vuejs.org/guide/essentials/application.html

//第一步:创建应用
// 每个 Vue 应用都是通过 createApp 函数创建一个新的 应用实例
import { createApp } from 'vue'const app = createApp({/* 根组件选项 */
})//第二步:每个应用都需要一个“根组件”
// 我们传入 createApp 的对象实际上是一个组件,每个应用都需要一个“根组件”,其他组件将作为其子组件。
import { createApp } from 'vue'
// 从一个单文件组件中导入根组件
import App from './App.vue'const app = createApp(App)//第三步:挂载应用
<div id="app"></div>
app.mount('#app')

最终:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'const app = createApp(App)app.use(store)
app.use(router)app.mount('#app')// 也可以简写为 createApp(App).use(store).use(router).mount('#app')

引入npm

XXX.vue 不能直接交给浏览器运行,所以得先进行处理和加工。要在浏览器中使用.vue文件,需要将其编译为可在浏览器中运行的JavaScript代码。有两个渠道:① webpack ② vue-cli (官方帮忙搭建的 webpack )

除此之外,项目可能需要用到别的框架、依赖,就引入了npm包管理器进行统一管理。

接上文。

  • 下载node之后,就会自动带有npm。在文件夹中npm init -y,会生成package.json文件。

  • npm i vue安装vue。package.json文件的dependencies中就会多了vue信息,意思就是添加了vue依赖。

  • package-lock.json 锁定依赖的版本号

  • 所有的依赖都会放在node_modules中

引入webpack

项目源文件越来越多,引入webpack打包。

  • 安装依赖 webpack、webpack-cli、webpack-dev-server

    npm i -D xxx安装依赖。-D的意思是这些以来不放在生产环境上,只是开发时使用。

  • 创建文件webpack.config.js。webpack在此文件进行配置。

引入babel

因为并不是每个浏览器都能支持ES6的语法,因此我们需要Babel来把代码从高版本转成低版本。

  • 安装babel依赖(配合core preset-env使用)

    npm i -D babel-loader @babel/core @babel/preset-env

引入vue-loader

浏览器无法识别vue单文件,用vue-loader以来进行识别。

CSS部分需要vue-template-compiler 和css-loader依赖

需要把源文件的HTML 和 JS合并->需要html-webpacl-plugin

  • npm i -D vue-loader vue-template-compiler css-loader vue-style-loader html-webpacl-plugin

webpack配置

  • webpack.config.js

JS合并->需要html-webpacl-plugin

  • npm i -D vue-loader vue-template-compiler css-loader vue-style-loader html-webpacl-plugin

webpack配置

  • webpack.config.js

入口文件等

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

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

相关文章

电-热耦合市场联合出清!考虑均衡约束的综合能源系统电-热分配方法程序代码!

前言 随着现代城市面临环境问题&#xff0c;原来燃煤的水和空间供暖设备已逐渐被电锅炉和热泵等电气设备所取代。此外&#xff0c;集中生产热能并通过管网分配热能的区域供暖系统&#xff0c;由于其更高的效率&#xff0c;在冬季漫长寒冷的国家和地区越来越受欢迎。供暖设备的…

超级大转盘!(html+less+js)(结尾附代码)

超级大转盘&#xff01;&#xff08;结尾附代码&#xff09; 网上看到有人用转盘抽奖&#xff0c;怀疑是不是有问题&#xff0c;为什么每次都中不了&#xff0c;能不能整个转盘自己想中啥中啥&#xff0c;查阅了网上写得好的文章&#xff0c;果然实现了只中谢谢参与&#xff0…

JAVA栈相关习题3

1.将递归转化为循环 比如&#xff1a;逆序打印链表 // 递归方式void printList(Node head){if(null ! head){printList(head.next);System.out.print(head.val " ");}} // 循环方式void printList(Node head){if(nullhead){return;}Stack<Node> snew Stack<…

4.5_shell的执行流控制

##1.for语句## &#xff08;1&#xff09;for语句作用 为循环执行动作 &#xff08;2&#xff09;for语句结构 for 定义变量 do 使用变量&#xff0c;执行动作 done 结束标志 &#xff08;3&#xff09;for语句的基本格式 格式1 格式1&#xff1a;#!/b…

【工程师的自我修养】前言

一、为什么大家不帮我&#xff1f; 九年义务教育4年大学&#xff0c;学生早已习惯了有个老师带着&#xff0c;在学校里敢于问问题的同学是好学的、上进的。但在社会中问问题往往是受到冷落的、需要低声下气的。从天堂到地狱的强烈落差&#xff0c;是最让毕业生无所适从的。为什…

OpenHarmony实战开发——引入开源C/C++库之Har包里的NDK

Har 包 HAR&#xff08;Harmony Archive&#xff09;是静态共享包&#xff0c;可以包含代码、C 库、资源和配置文件。通过 HAR 可以实现多个模块或多个工程共享 ArkUI 组件、资源等相关代码。HAR 不同于 HAP&#xff0c;不能独立安装运行在设备上&#xff0c;只能作为应用模块…

如何查看自己的电脑是否有(支持)无线网卡驱动

要查看自己的电脑是否支持无线网卡驱动,可以按照以下步骤进行检查: 打开"设备管理器" - 在Windows 10/11中,可以在搜索栏输入"设备管理器"打开它 - 在旧版Windows系统中,可以通过"控制面板"->"“系统和安全”->""系统&quo…

python连接SQL Server数据库的几点建议

1、用常规的做法可能不行&#xff0c;如 用 pymssql&#xff0c;各种折腾&#xff0c;连不上很正常&#xff0c;常用的帖子见这个&#xff1a; pymssql连接sql server一直报错解决方法&#xff08;pymssql._pymssql.OperationalError: (20009, b‘DB-Lib error message 20009…

ansible 深入介绍之 主机清单与playbook

目录​​​​​​​ 一 inventory 主机清单 1&#xff0c;主机清单 是什么 2&#xff0c;主机清单 定义方式 2.1 自定义主机端口 2.2 定义 范围ip 地址 2.3 定义 拥有相似的主机名 3&#xff0c; inventory 中的变量 3.1 常见 变量 3.2 主机变量 3.3 组变量 3.…

c语言练习5.8

1.分析代码 VS开发环境调试下面的代码&#xff0c;画图解释下面代码的问题 #include <stdio.h> int main() {int i 0;int arr[] {1,2,3,4,5,6,7,8,9,10};for(i0; i<12; i){arr[i] 0;printf("hello bit\n");}return 0; } 分析: 2.喝汽水问题 喝汽水&a…

嘉楠堪智 CanMV K230 进行 Linux、RT-smart 系统开发

本文记录学习、使用 K230 SDK 进行 Linux、RT-smart 系统的开发的一些关键步骤&#xff0c;如何获取系统源代码&#xff0c;如何配置环境&#xff0c;如何使用 Docker 进行编译&#xff0c;获得系统文件。 具体详细的教程&#xff0c;可以学习 CanMV K230 教程。 目录 一、S…

区间合并,CF 1102E Monotonic Renumeration

目录 一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 二、解题报告 1、思路分析 2、复杂度 3、代码详解 一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 Problem - 1102E - Codeforces 二、解题报告 1、思路分析 我们不难发现对…

如何测试计算机的内存是否存在问题?这里提供两种方法

如果你的电脑是崩溃、冻结还是不稳定,那么它的内存可能有问题。要进行检查,你可以使用Windows 11、10和7附带的隐藏系统工具,或者下载并启动更高级的工具。 内存测试工具的工作原理 计算机的随机存取存储器(内存)是其工作存储器。你的计算机的操作系统和应用程序不断地将…

2024.5.6 —— LeetCode 高频题复盘

目录 283. 移动零153. 寻找旋转排序数组中的最小值468. 验证IP地址224. 基本计算器739. 每日温度138. 随机链表的复制47. 全排列 II207. 课程表LCR 125. 图书整理 II 283. 移动零 题目链接 Python class Solution:def moveZeroes(self, nums: List[int]) -> None:"&q…

.net 6.0 框架集成ef实战,步骤详解

一、代码框架搭建 搭建如下代码架构: 重点含EntityFrameworkCore工程,该工程中包含AppDbContext.cs和数据表实体AggregateObject 1、AppDbContext 代码案例 //AppDbContext 代码案例using Microsoft.EntityFrameworkCore;namespace EntityFrameworkCore {public class Ap…

思通数科大模型在智能数据查询系统中的深度应用:销售数据分析的革新

在企业决策支持系统中&#xff0c;销售数据分析占据着举足轻重的地位。思通数科的大模型技术&#xff0c;结合自然语言处理&#xff08;NLP&#xff09;和机器学习&#xff0c;为智能数据查询系统提供了强大的分析能力。本文将详细描述思通数科大模型在销售数据分析中的应用&am…

2024 GESP6级 编程第一题 游戏

题目描述 你有四个正整数 &#xff0c;并准备用它们玩一个简单的小游戏。 在一轮游戏操作中&#xff0c;你可以选择将 减去 &#xff0c;或是将 减去 。游戏将会进行多轮操作&#xff0c;直到当 时游戏结束。 你想知道游戏结束时有多少种不同的游戏操作序列。两种游戏操作…

C++ Primer 中文版(第 5 版)- 第一单元练习

第一单元 练习 1.1 编写程序&#xff0c;在标准输出上打印Hello, World。 #include <iostream>int main(int argc, const char * argv[]) {std::cout << "Hello, ceshi!\n";return 0; }练习 1.2 我们编写程序使用乘法运算符*&#xff0c;来打印两个数…

科沃斯,「扫地茅」荣光恐难再现

作者 | 辰纹 来源 | 洞见新研社 科沃斯恐怕已经很难再回到被市场誉为“扫地茅”时的荣光了。 不久前&#xff0c;科沃斯发布2023年财报&#xff0c;报告期内营业收入155亿&#xff0c;同比仅增长1.16%&#xff0c;归母净利润6.12亿元&#xff0c;同比下降63.96%&#xff0c;直…

20240508请问GTX2080TI的300和300A核心的差异?

20240508请问GTX2080TI的300和300A核心的差异&#xff1f; 在拼多多/淘宝上&#xff0c;GTX2080TI的300A核心的会比300核心的贵100&#xffe5;左右。 但是怎么区分呢&#xff1f; 300a核心和300请问怎么区分呢&#xff1f;[嘻嘻] devicr ID diviceid 1e07是300a 1e04是300 Gp…