当前位置： 首页 > news >正文

Vue02-VUE工程化开发模式

news 2025/10/23 12:20:53

目录

一、VUE代码开发方式

1.1 传统开发模式

1.2 工程化开发模式

1.3 总结

二、准备工程化环境

2.1 安装工具

2.1.1 安装Nodejs

2.1.2 安装yarn或pnpm

2.2 三个包管理器的命令

2.3 总结

三、创建Vue工程化项目

3.1 脚手架

3.2 创建步骤

3.2.1 选定⼀个存放位置

3.2.2 执行命令 npm create vue@latest

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

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

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

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

3.3 总结

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

4.1 目录和文件解读

4.2 总结

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

5.1 main.js

5.2 总结

六、Vue单文件

6.1 思考

6.2 vue单文件介绍

6.3 总结

七、清理目录结构

7.1 目标

7.2 步骤

7.3 补充内容

八、setup简写、插值和响应式

8.1 传统方式渲染helloworld

8.2 工程化的环境下渲染helloworld

8.3 工程化的环境下渲染helloworld代码

8.4 简写渲染helloworld代码

8.5 插值，响应式函数

8.6 安装VSCode插件

8.7 总结

一、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')

八、setup简写、插值和响应式

8.1 传统方式渲染helloworld

  1. 引入vue3源代码
  2. 准备渲染容器
  3. 创建应用并且指明渲染的位置，同时提供数据并返回
  4. 值进行渲染{{表达式}}

8.2 工程化的环境下渲染helloworld

  1. 在App.vue中提供setup函数，声明数据并返回
  2. 插值渲染{{表达式}}

8.3 工程化的环境下渲染helloworld代码

在main.js中我们导入了App.vue模块，我们所写的vue代码都是要写在这个模块里面才能被main.js打包的，代码如下所示：

<script>export default{setup(){const msg="hello Vue+Vite"return {msg:msg}}}</script><template><h1>{{ msg }}</h1>
</template><style scoped></style>

我们发现这样写setup很麻烦，于是就有了setup简写

8.4 简写渲染helloworld代码

直接把setup写在script后面，默认会返回对象，所以就不用写return了。如下所示：

<script setup>
const msg="hello world"
</script><template><h1>{{ msg }}</h1>
</template><style scoped></style>

8.5 插值，响应式函数

<script setup>
import {ref,reactive} from 'vue'
const msg=ref("hello world")
const obj=reactive({name:"xiao vue",age:10
})
const fn=()=>{return 100
}
</script><template><h1>{{ msg }}</h1><p>我叫{{ obj.name }},今年{{ obj.age }}岁了</p><p>{{ obj.age>18?"成年":"未成年" }}</p><p>来年就{{obj.age+1 }}了</p><p>{{ fn() }}</p><p>name里面有{{ obj.name.split(" ").length }}单词</p>
</template><style scoped></style>

8.6 安装VSCode插件

为了今后可以快速生成 vue文件的三部分组成，建议安装VSCode的插件Vue3 Snippets
然后在vue文件中输入vbase即可快速生成模版

8.7 总结

1.推荐使用 setup简化写法

<script setup></script>
<template></template>
<style></style>

http://www.dtcms.com/a/516950.html

相关文章：

  • LeetCode 380: O(1) 时间插入、删除和获取随机元素
  • Vue2 与 Vue3 父子组件参数传递全解析：从实例到原理
  • html网站登陆注册怎么做爱奇艺会员做任务送十天网站
  • win7 网站配置微信小商店分销系统
  • SQL sever数据库--第二次作业
  • less使用说明
  • 重庆荣昌网站建设价格南京制作网站培训学校
  • 电脑网站和手机网站怎么做相同路径电商网站产品模块
  • 仿真系列专栏介绍
  • 系统集成项目管理工程师第六章：数据工程（精简版）
  • [lc-rs] 双指针
  • 建设网站的目的98建筑网站
  • 招远建网站中山网站优化营销
  • unity基础学习笔记＜下＞
  • [人工智能-大模型-40]：模型层技术 - 无监督式学习、学习的目标、收敛条件、评估依据 - 通俗易懂
  • 大模型微调（四）：人类反馈强化学习（RLHF）
  • 自动化实战 Playwright破解滑块验证码的完整实战指南
  • 网站建设公司上海做网站公司哪家好云南网站做的好的公司哪家好
  • sql 按照前端传的数组里的值进行自定义排序
  • 网站备案更换主体电子商务后悔死了
  • Python_封装案例
  • 查找5个搜索引擎作弊的网站普通网站建设的缺陷
  • 卫浴网站模板获取网站开发语言
  • 网站的盈利点企业建站的作用是什么
  • 哪里有网站建设培训班二级a做爰片免费网站
  • kmp需要技能
  • 大岭山网站仿做杭州家装口碑比较好的公司
  • 【Pycharm】Debug展示完整Tensor
  • [iOS] 计算器仿写
  • 北京专业网站制作公司家在深圳龙光城