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

入口文件等

上一篇:Pikachu 靶场 CSRF 通关解析


下一篇:【四、性能测试】性能测试基础与几个重要的概念-一、什么是性能测试?