目录
一、Vue介绍
- 基础介绍
- Vue是一个前端Web框架，属于单页应用（SPA）
- Vue一般分为Vue2和Vue3，其中Vue2版本已停止维护，本专栏和本篇幅着重讲Vue3部分。
- Vue3在兼容Vue2选择式API的同时，又提出了组合式API。
- Vue3组合式API已逐渐成为主流，得到多数前端开发者的拥护。
- 基础原理讲解
- 通过数据模型驱动视图View更新变化
- 通过监听View视图数据变化同步更新数据模型
Vue是基于MVVM模式实现的一套框架，工作原理如下图所示，ViewModel相当于监听者。
- VM监听View视图页DOM数据变化同步给Model数据模型（如页面Form表单视图数据变化）。
- VM监听Model数据变化同步更新至View视图DOM节点。
二、创建Vue项目
nodeJs
首先需要安装NodeJs配置Vue开发环境。
NodeJs下载链接：Node.js — Download Node.js®
安装成功后打开windows的cmd命令窗口运行node -v指令，如果显示了当前安装的NodeJs版本，则表示安装成功
这里笔者安装的v20.18.0
nvm版本管理
相比于直接下载安装NodeJs，笔者更建议下载nvm，通过nvm来管理你电脑上的NodeJs版本。
nvm：用于管理NodeJs版本的一种版本管理工具
为什么需要管理NodeJs？部分Vue项目所需要的NodeJs版本有所差异，这种差异在NodeJs版本之间是不兼容的，所以通过nvm灵活切换NodeJs的版本可以解决各Vue项目版本冲突的问题。
nvm下载链接：开始 下载nvm - nvm中文官网
建议下载1.1.12版本
安装成功后，打开windows的cmd窗口运行nvm -v，确保安装成功
nvm安装成功后，cmd窗口运行nvm install 20.18.0命令（然后等待下载安装完成即可，如果已经安装过了则忽略。）
nvm的更多功能指令，这里不做赘述，如果有需要可以评论区留言
创建Vue项目
创建Vue项目的方式有好几种，这里只介绍我个人推崇使用的一种。
首先确保你安装了NodeJs。
NodeJs安装时，会默认安装一个叫npm的包管理工具。npm常用于构建项目的依赖包。
我们也是直接通过npm来快速搭建一个Vue项目
首先选择一个项目目录，在这个目录下打开windows cmd窗口运行如下指令
# 执行命令后,会进入Vue3项目配置预选界面
npm create vue@latest这里以我的为例，执行命令后，界面显示如下图
创建好项目之后，按照指示继续执行命令，这里以我的图片界面为例，应该执行如下命令。
# 进入项目目录
cd vue3-demo
# 执行项目初始化(下载Vue3项目运行需要的各种包),等待执行完成
npm install
# 依赖包下载好之后,启动运行项目
npm run dev在你执行npm run dev后，会出现如下界面
注意Local: http://localhost:5173/
将对应的链接通过浏览器打开，如果打开成功，恭喜你，已经启动成功了vue3的项目。
这里要注意下，此时这个cmd窗口如果关闭了，代表相应的服务窗口关闭，对应的链接也就失效。
正常访问主页应该是这样的
VS Code编辑器
在介绍Vue项目目录之前，先介绍一下VsCode编辑器。
VsCode是前端开发者常用的一款代码编辑器，内置丰富的插件，可以为开发者提供很大便利。
这里也建议安装VsCode来进行开发
VsCode下载安装：Download Visual Studio Code - Mac, Linux, Windows
安装好VsCode后，打开刚才的Vue项目。
这里就不教怎么打开项目文件了，实在需要的话评论区问一下。
三、.Vue文件结构说明
刚创建的Vue项目，目录结构一般如下。看着很乱是不是，没关系，先跟着我的思路来。
我们首先打开App.vue页面，把相关内容清理成如图中所示。
在Vue中一个.vue文件通常包含三个部分
- <script></script>一般用来编写业务逻辑代码，在其中编写的js代码可以驱动页面视图变化
- <template></template>页面模板，也就是View视图，编写HTML标签。
- <style></style>用来编写页面相关的css样式
<!-- 编写js代码,也就数据模型Model -->
<!-- setup属于vue3的一种语法糖, -->
<!-- lang="ts"一种声明,表示代码体为TypeScript -->
<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>
<!-- 页面模板,也就是View视图区 -->
<template>
<header>
</header>
<RouterView />
</template>
<!-- 编写CSS样式,标签上的scoped表示编写的样式仅在当前组件页生效,防止其他组件页的同名样式相互污染 -->
<style scoped>
</style>数据渲染
现在我们熟悉了.vue文件，那么Vue如何将数据模型中的数据渲染到视图上呢？
为了避免更复杂，这里只简单展示Vue的模板语法，通过{{}}绑定数据模型中的数据。
你把下面这些代码全部复制到你的项目中，App.vue文件中就行，然后刷新一下浏览器的网页。
<!-- 编写js代码,也就数据模型Model -->
<!-- setup属于vue3的一种语法糖, -->
<!-- lang="ts"一种声明,表示代码体为TypeScript -->
<script setup lang="ts">
const msg = "hello Vue3";
</script>
<!-- 页面模板,也就是View视图区 -->
<template>
<!-- 通过{{ msg }} 跟数据模型建立关联,此时浏览器端网页只显示：hello Vue3-->
<h1>{{msg}}</h1>
</template>
<!-- 编写CSS样式,标签上的scoped表示编写的样式仅在当前组件页生效,防止其他组件页的同名样式相互污染 -->
<style scoped>
</style>界面应该显示如下。
这里只展示Vue的模板语法，实际上Vue提供了很多API来方便我们对视图进行渲染，模板语法只是其中的一种。
而你能看到这里，也算初窥门径了，因为在日常开发中，大多数都是.vue组件化开发，而不需要关心业务以外的事情。
后续我还会介绍Vue的其它API使用。
四、Vue项目目录说明
接下来对Vue项目的各个目录和关键文件作说明。如果漏掉哪个文件没说，说明其在日常开发中无足轻重，不需要特别注意。
.vscode VSCode编辑器自动生成。
node_modules npm 下载下来的各种依赖包存放处
public 公共资源文件，存放一些公用的系统资源
src
assets 一般存放各种静态资源如.css，img图片，外部依赖js等...
components 存放各种公共组件.vue，vue最擅长做的一件事，组件化开发...
router 存放vue的路由文件
stores Vue的系统状态管理
views 存放各种视图文件.vue
App.vue 系统根组件，一般无需修改
main.ts Vue入口文件，Vue项目的全局资源配置，静态资源文件引入都在这里（重要）
index.html 一般无需修改，最多做一些全局资源的配置，以及meta头的处理，一般小项目不需要额外处理。
package.json 记录项目中引入了哪些外部依赖包
tsconfig.json 做ts配置，可设置开发习惯，建立开发标准
vite.config.ts 配置Vite，Vite是一种项目构建工具，相比于传统的Webpack，其项目构建速度更快！
main.ts文件说明
一般情况下，这个文件默认的部分不用动
如果要做全局资源的配置，例如全局组件，自定义指令等等...都在这儿配置
# 引入静态资源文件
import './assets/main.css'
# 引入vue
import { createApp } from 'vue'
# 引入pinia状态管理（Vue新推出的一个状态管理框架）
import { createPinia } from 'pinia'
# 引入要挂载的节点
import App from './App.vue'
# 引入路由器
import router from './router'
# 创建一个vue实例对象
const app = createApp(App)
# 注册状态管理
app.use(createPinia())
# 注册Vue的路由器
app.use(router)
# 挂载注册DOM,相当于监听一个id为app的DOM节点,此后这个节点上的所有数据变化都将被vue实例监听
app.mount('#app')五、Vue官网文档学习
多翻一翻Vue官网的文档学习，如果有不懂，可以在评论区留言
关于Vue的任何学习都可以在评论区留言，大家一起交流！
学海无涯苦作舟，共勉。
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
