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

Vue3：脚手架

news 来源：原创 2025/5/17 6:35:22

工程环境配置

1.安装nodejs

这里我已经安装过了，只需要打开链接Node.js — Run JavaScript Everywhere直接下载nodejs，安装直接一直下一步下一步

安装完成之后我们来使用电脑的命令行窗口检查一下版本

查看npm源

这里npm源的地址是淘宝的源，不是官方源，因为我之前已经改了，当我们获取源数据时会从外国的源里面获取，这里我们更换一下获取源的位置

这里我们将获取源数据的位置更改了

这里我们也可以安装其它的包管理器

比如yarn和pnpm

npm install yarn -g 
npm install pnpm -g

检测是否安装成功

pnpm -v
yarn -v

创建脚手架

创建脚手架其实就是创建一个项目文件，但是这个项目文件已经为我们添加了很多代码，所以我们就不需要去写，直接拿来用就可以了

选择一个存放脚手架文件的位置

这里我直接选择桌面，然后已终端的形式打开这个文件

执行命令

npm create vue@latest

会安装并执行create-vue

然后命令行会问我们这个项目要取什么名字，需不需要什么功能，这里的功能我们全都选择否

我们会得到一个文件，我们来用终端来打开这个文件

npm i

用来安装vue的模块依赖，后续指令需要它来实现

npm run dev

启动项目，启动完了项目终端会给我们一个链接，这个链接对应的地址就是本地服务器的网页

让我们打开终端给我们的链接

这是vue给我们的初始页面

这样很多东西就不需要我们自己去配置，直接下载到本地直接用就可以了，这种东西我们称为脚手架

认识脚手架目录

node_modules里面有很多我们环境需要使用到的包，不如vue包，这样我们就不需要到官网去获取vue的数据，直接安装在本地直接拿来用就可以了

package.json用来管理项目的文件

src/main.js是整个项目打包的入口

App.vue是vue代码的入口

index.html是项目入口网页

src下的所有代码都会被vite打包成css/js/html交给index.html然后呈现在观众眼前

分析脚手架中三个入口级代码

三个入口文件分别是：main.js，App.vue，index.html

main.js负责将App.vue的代码整合起来创建应用，App.vue负责根层的组件，index.html负责将main.js打包形成的应用在网页中展示出来

Vue单文件

Vue的文件由三个部分组成分别是HTML，CSS，JS，我们来看Vue文件的简化版

<script setup>
//数据...
</script><template>
<!-- 数据.. -->
</template><style scoped>
/* 数据 */
</style>

script：JS，template：HTML，style：CSS

这里的scoped能让<style>保证修饰<template>

清理目录

为了便于后于的开发，我们将脚手架默认给我们的数据删除，分别是assets和component还有Vue里面的初三大框架之外的代码

现在这个项目里的代码文件才是项目主体

代码相应练习

<script setup>
import { ref,reactive } from "vue"
let str=ref("hello,world")
let obj=reactive({num:69,str1:"ganchuhao",grade:60
})
function func() {return 100
}
</script>
<template><p>{{ str }}</p><p>我是{{obj.str1}}学号是{{ obj.num}}</p><p>我是{{obj.str1}}学号是{{ obj.num+200}}</p><p>成绩{{ obj.grade>60?"及格":"不及格" }}</p><p>func的返回值是{{ func() }}</p><p>STR的单词有{{ str.split(' ').length }}个单词</p></template>
<style scoped>
</style>

演示结果