Vue工程化项目创建，基本概念了解，入门程序

一.环境配置

1.安装node.js

这个简单不演示，注意这里下 node.js 之后会自动配置环境变量。

2.npm包管理工具

npm是安装node.js就会自动安装的。与其同等功能的包管理工具还有 pnpm，yarn下面是两种包管理工具的下载方法。

安装
# windows系统
npm install yarn -g
npm install pnpm -g
___________________________________
# mac系统
sudo npm install yarn -g
sudo npm install pnpm -g

检查版本
yarn -v
pnpm -v

配置npm的全局安装路径：

这个路径为node.js的安装路径
npm config set prefix " C:\Program Files\nodejs"

检察路径
npm config get prefix

切换npm的淘宝镜像：

// 查看 npm 源
npm config get registry
// 默认是指向 https://registry.npmjs.org/，也就是官⽅源

// 可以给npm换源
npm config set registry https://registry.npmmirror.com

二.创建vue的项目并运行

1. 选定⼀个想把项目存放在那里的目录

2. 执⾏命令 npm create vue@latest ，会安装并执⾏ create-vue ， 它是Vue 官⽅的项⽬脚⼿架⼯具

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

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

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

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

三.认识vue的项目结构

主要的文件及作用：

1、node_modules ⸺ 第三⽅模块包

2、package.json ⸺ 项⽬管理⽂件

3、src/main.js —— 整个项⽬打包的⼊⼝

4、src/App.vue —— Vue代码的⼊⼝(根组件)

5、index.html —— 项⽬⼊⼝⽹⻚

四.认识vue脚手架的项目是如何运行的

文件基本的执行流程图：

五.理解.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 通过浏览器呈现效果。

六.清除原本无用的代码

1. 删除 assets ⽂件夹

2. 删除 components ⽂件夹

3. 清除 App.vue 的内容，只留下三个标签即可

<script setup></script>

<template></template>

<style scoped></style>

4. 清除 main.js 的内容，改成这些内容即可

// 按需从vue中按需导入createApp这个函数
import { createApp } from 'vue'
// 导入App.vue这个文件，这时导入.vue文件特有的语法.
import App from './App.vue'
// 创建App.vue的应用并指明渲染位置 .mount是渲染到那个容器
createApp(App).mount('#app')

七.基本代码-setup简写+插值表达式+响应式

1.setup函数

setup函数 vue3 API的⼊⼝函数

• setup 函数是 Vue3 特有的选项，作为编写代码的起点

• 标签中⽤到的数据或函数，需要在 setup 中声明并返回

• 函数中 this 不是Vue实例，setup 中是不会⽤到 this 的

2.插值表达式

语法格式

{{ 表达式 }}

表达式： 凡是有结果的操作/运算 ，前端中常⻅的表达式有：

◦ 所有的字⾯量

◦ 对象.属性名
◦ 算术运算或三元运算

◦ ⽅法的调⽤

使用步骤 

◦ script下的 setup中定义并返回初始数据  
◦ template中 插值表达式 展⽰数据 

3.数据响应式

概念：

就是 数据变了，视图跟着变。

数据：setup返回的数据

视图：html标签里面的内容

响应式函数reactive和ref：

使用了这两个函数都可以让数据变成响应式

使用方法都是要先从Vue中解构出这两个函数才可以使用。