国家摄影网站,架设网站多少钱,响应式网站模板 食品,网站建设伍金手指下拉2目录 一、Vue介绍
二、创建Vue项目
nodeJs nvm版本管理 创建Vue项目
VS Code编辑器
三、.Vue文件结构说明
数据渲染
四、Vue项目目录说明
main.ts文件说明
五、Vue官网文档学习 一、Vue介绍
基础介绍 Vue是一个前端Web框架#xff0c;属于单页应用#xff08;SPA属于单页应用SPAVue一般分为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 vuelatest
这里以我的为例执行命令后界面显示如下图 创建好项目之后按照指示继续执行命令这里以我的图片界面为例应该执行如下命令。
# 进入项目目录
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的一种语法糖, --
!-- langts一种声明,表示代码体为TypeScript --
script setup langts
import { RouterLink, RouterView } from vue-router
import HelloWorld from ./components/HelloWorld.vue
/script!-- 页面模板,也就是View视图区 --
templateheader/headerRouterView /
/template!-- 编写CSS样式,标签上的scoped表示编写的样式仅在当前组件页生效,防止其他组件页的同名样式相互污染 --
style scoped/style
数据渲染
现在我们熟悉了.vue文件那么Vue如何将数据模型中的数据渲染到视图上呢
为了避免更复杂这里只简单展示Vue的模板语法通过{{}}绑定数据模型中的数据。
你把下面这些代码全部复制到你的项目中App.vue文件中就行然后刷新一下浏览器的网页。
!-- 编写js代码,也就数据模型Model --
!-- setup属于vue3的一种语法糖, --
!-- langts一种声明,表示代码体为TypeScript --
script setup langtsconst 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 一般存放各种静态资源如.cssimg图片外部依赖js等... components 存放各种公共组件.vuevue最擅长做的一件事组件化开发... router 存放vue的路由文件 stores Vue的系统状态管理 views 存放各种视图文件.vue App.vue 系统根组件一般无需修改 main.ts Vue入口文件Vue项目的全局资源配置静态资源文件引入都在这里重要
index.html 一般无需修改最多做一些全局资源的配置以及meta头的处理一般小项目不需要额外处理。
package.json 记录项目中引入了哪些外部依赖包
tsconfig.json 做ts配置可设置开发习惯建立开发标准
vite.config.ts 配置ViteVite是一种项目构建工具相比于传统的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官网的文档学习如果有不懂可以在评论区留言
搭配 TypeScript 使用 Vue | Vue.js
关于Vue的任何学习都可以在评论区留言大家一起交流 学海无涯苦作舟共勉。
