17一起做网站广州友情链接交换网站
工程环境配置
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>演示结果
快速生成基础代码
vbase