VUE工程化开发模式

目录

一、VUE代码开发方式

[1.1 传统开发模式](#1.1 传统开发模式)

[1.2 工程化开发模式](#1.2 工程化开发模式)

[1.3 总结](#1.3 总结)

二、准备工程化环境

[2.1 安装工具](#2.1 安装工具)

[2.1.1 安装Nodejs](#2.1.1 安装Nodejs)

[2.1.2 安装yarn或pnpm](#2.1.2 安装yarn或pnpm)

[2.2 三个包管理器的命令](#2.2 三个包管理器的命令)

[2.3 总结](#2.3 总结)

三、创建Vue工程化项目

[3.1 脚手架](#3.1 脚手架)

[3.2 创建步骤](#3.2 创建步骤)

[3.2.1 选定⼀个存放位置](#3.2.1 选定⼀个存放位置)

[3.2.2 执行命令 npm create vue@latest](#3.2.2 执行命令 npm create vue@latest)

[3.2.3 进入项目根目录: cd 项目名称](#3.2.3 进入项目根目录: cd 项目名称)

[3.2.4 安装vue等模块依赖: npm i](#3.2.4 安装vue等模块依赖: npm i)

[3.2.5 启动项目： npm run dev ，会开启⼀个本地服务器](#3.2.5 启动项目： npm run dev ，会开启⼀个本地服务器)

[3.2.6 浏览器网址栏输⼊：http://localhost:5173](#3.2.6 浏览器网址栏输⼊：http://localhost:5173)

[3.3 总结](#3.3 总结)

四、认识脚手架目录及文件

[4.1 目录和文件解读](#4.1 目录和文件解读)

[4.2 总结](#4.2 总结)

五、分析3个入口文件的关系

[5.1 main.js](#5.1 main.js)

[5.2 总结](#5.2 总结)

六、Vue单文件

[6.1 思考](#6.1 思考)

[6.2 vue单文件介绍](#6.2 vue单文件介绍)

[6.3 总结](#6.3 总结)

七、清理目录结构

[7.1 目标](#7.1 目标)

[7.2 步骤](#7.2 步骤)

[7.3 补充内容](#7.3 补充内容)

---

一、VUE代码开发方式

1.1 传统开发模式

基于html⽂件开发Vue, 类似jQuery的使⽤, <script src="vue.js"></script>

• 优点：简单、上⼿快
• 缺点：功能单⼀、开发体验差

1.2 工程化开发模式

在构建工具(Vite/Webpack )环境下开发Vue, 这是最推荐的、也是企业采用的方式

优点：

a. 功能全⾯

b. 开发体验好

缺点：

a. ⽬录结构复杂

b. 理解难度提升

1.3 总结

1. Vue代码有哪两种开发方式？

答： 1. 传统开发方式，直接用script引入vue.js⽂件

2. 在工程化环境下，借助Vite对Vue代码进行打包 (推荐)

2. 工程化环境下开发Vue代码，相比传统方式，有哪些优势？

答：1. 功能全面

2. 开发体验好

在工程化的环境里面，我们所写的源代码，并不能直接交给浏览器去运行，因为浏览器不认识Vue，所以需要借助Vite来对Vue源代码进行打包成为.html,.css,.js.png等，才能被浏览器所认识，并去运行。打包后才能交给浏览器去运行

二、准备工程化环境

2.1 安装工具

2.1.1 安装Nodejs

注意： 安装18.3或更⾼版本的 Nodejs

官⽹: https://nodejs.org/en/

1.点击下载长期版

2.双击安装程序，并点击下一步

3.接受协议

4.点击下一步，点击install安装

5.安装完成，点击finish

6.按win+r打开控制台窗口，执行下面两句代码，这是查看版本的意思。node会自动帮忙安装npm，npm的全程是node package management

node -v

npm -v

7.npm换源。这是为了便于我们后期npm下包的速度更快，npm下载包会默认从国外开始下载，下载速度慢，我们换源之后，便可以把npm下包的源头转向国内，下载速度就会变快。

//查看npm**源

npm config get registry

//默认是指向https://registry.npmjs.org/**，也就是官⽅源

//为了提⾼npm下载速度,可以给npm**换源

*//*国内源有很多，我这⾥⽤淘宝源吧。毕竟是⼤公司，会⽐较稳定

npm config set registry https://registry.npmmirror.com

//再⼀次查看npm**源

npm config get registry

2.1.2 安装yarn或pnpm

1.yarn和pnpm、还有npm三者的功能类似，都是包管理工具，

⽤来下载或删除模块包, 性能上yarn和pnpm优于npm

# windows**系统

npm install yarn -g

npm install pnpm -g

---

# mac**系统

sudo npm install yarn -g

sudo npm install pnpm -g

2.检测是否安装成功

yarn -v

pnpm -v

2.2 三个包管理器的命令

npm装包：npm i 包名

nmp删包：npm un 包名

yarn装包：yarn add 包名

yarn删包：yarn remove 包名

pnpm装包：pnpm i 包名

pnpm删包：pnpm un 包名

2.3 总结

准备工程化环境要安装哪些工具？node / yarn | pnpm

三、创建Vue工程化项目

3.1 脚手架

⼀个保证各项⼯作顺利开展的平台。好处就是 拿来就用，零配置 ，基于它我们来学习Vue

3.2 创建步骤

1. 选定⼀个存放位置，比如选择桌面，根据自己情况，选择D盘或E盘等

2. 执行命令 npm create vue@latest ，会安装并执行 create-vue ，它是Vue 官方的项目脚手架工具

3. 进⼊项目根目录: cd 项目名称

4. 安装vue等模块依赖: npm i

5. 启动项目： npm run dev ，会开启⼀个本地服务器

6. 浏览器网址栏输⼊：http://localhost:5173

3.2.1 选定⼀个存放位置

我在我的code下的html文件里面创建了一个VUE文件，然后点到这个文件里面。接着点到路径，输入cmd进入命令行窗口。如下所示：

3.2.2 执行命令 npm create vue@latest

输入这个命令之后，我们可以输入我们项目的名称，可以自己写，尽量不要用中文字符。我们这里就用my-vue-project。

输入完项目名称之后，会出现下面的内容：

都可以不选，我们这里都没有选，然后按回车确认，出现以下内容：

同样的，我都没有选，直接点击回车确认：

然后接着点击回车，会生成一个示例代码。界面如下所示：

然后回到我们的那个文件夹，就会多出一个项目名称的文件。

3.2.3 进入项目根目录: cd 项目名称

3.2.4 安装vue等模块依赖: npm i

3.2.5 启动项目： npm run dev ，会开启⼀个本地服务器

在命令行输入npm run dev之后，会出现以下界面：

3.2.6 浏览器网址栏输⼊：http://localhost:5173

在浏览器打开这个网站之后，就会出现以下界面

3.3 总结

1. Vue脚⼿架是什么？有什么好处？

答：⼀个写Vue代码的环境(基础), 拿来就用, 零配置

2. 如何创建⼀个脚⼿架项目？

答：npm create vue@latest

3. 如何启动项目？

答：1、npm run dev , 启动⼀个本地服务器

2、浏览器输⼊ http://localhost:5173

四、认识脚手架目录及文件

使用vscode打开我们刚刚创建的文件如下所示：

4.1 目录和文件解读

node_modules：管理第三方依赖包，我们通过npm，yarn，pnpm下载的一些模块包，都是放在这个文件下面。

src：源代码，我们都是在src下面来进行开发的。

App.vue：Vue的入口文件/根组件

main.js：项目的打包入口，在这个文件中，有很多vue代码，浏览器是不能识别vue代码的，需要打包才能变成浏览器所能识别的，例如html，css，js等，打包就需要有打包的起点，所以是以main.js作为项目打包的入口。

index.html：项目的入口网页，打包后的代码是交给了index.html了，然后通过浏览器访问index.html.

4.2 总结

1.脚手架项目中，几个主要的文件及作用？

答：1、node_modules--第三方模块包

2、package.json--项目管理文件

3、src/main.js--整个项目打包的入口

4、src/App.vue--Vue代码的入口（根组件）

5、index.html--项目入口网页

2．我们今后Vue代码写哪个目录下?

答：src目录,src下的所有代码会被vite 打包成 css/js/img，然后交给index.html，最终通过浏览器呈现在用户眼前

五、分析3个入口文件的关系

5.1 main.js

我们先来打开main.js里面的代码，如下所示：

第一行代码是导入css样式；

第二行代码是导入创建应用的函数；

第三行代码是导入Vue的入口文件；

第四行代码是基于Vue的入口创建应用并且渲染到 id=app 的盒子中。

在打包main.js之前，这个里面导入的其他模块也会被打包。如果这个其他模块里面也导入了另外的模块，这个另外的模块也会被打包。简单来说就是跟main.js有直接关系和有间接关系的都会被打包成为js，css和img等文件，打包后的代码就会交给index.html，我们使用浏览器通过http://localhost:5173访问的就是index.html。我们写的源代码最终交给了index.html,而浏览器访问的就是index.html，所以说，我们写的源代码效果最终通过浏览器展现在我们的眼前。如下所示：

main.js它是一个非常关键的中间人，它是架起vue代码和网页代码的桥梁，没有main.js，我们所写的vue代码就无法通过浏览器呈现出来。

5.2 总结

1. main.js、App.vue、index.html 三个文件的作用?

答： 1、main.js一项目打包的入口一创建应用

2、App.vue一Vue代码的入口(根组件)

3、index.html---项目的入口网页

2. mian.js、App.vue、index.html 三者的关系是什么?

答： 1、App.vue(Vue入口）=>main.js(项目打包入口)=>index.html(浏览器入口）

2、main.js是Vue 代码通向网页代码的桥梁，非常关键

六、Vue单文件

一个.vue文件就是一个Vue单文件

6.1 思考

代码写一起、担心class类名、js变量名重名冲突？Vue中如何避免呢?

6.2 vue单文件介绍

我们来看一下App.vue文件，如下所示：

1．vue推荐采用.vue的文件来开发项目

2.一个vue文件通常有3部分组成，script(JS）+ template(HTML）+ style(CSS)

3.一个vue文件是独立的模块，作用域互不影响

4.style配合scoped属性，保证样式只针对当前template内的标签生效

5.vue文件会被vite打包成js、css等，最终交给index.html 通过浏览器呈现效果

6.3 总结

1．vue文件的组成是什么?

答：三部分组成 = script(JS)+template(HTML)+style(CSS)（没有顺序要求，只是推荐JS写在前，HTML写在中间，CSS写在末尾）

2.vue单文件的好处?

答：独立的作用域，不用担心JS变量名、CSS选择器名称冲突

七、清理目录结构

7.1 目标

为了便于后续学习Vue代码，这里需要清除默认不需要的目录结构

7.2 步骤

1.删除 assets 文件夹

2.删除components 文件夹

3.清除 App.vue 的内容（将script(JS）+ template(HTML）+ style(CSS)之间的内容去清除 ）

4.清除main.js 的内容

7.3 补充内容

在 App.vue 中

<script setup></script>

<template>

App根组件

</template>

<style></style>

在 main.js 中

import { createApp } from 'vue'

import App from './App.vue'

createApp(App).mount('#app')