Vue3&Vite
Vue3
Vue 是一款用于构建用户界面的渐进式 JavaScript 框架,它基于标准 HTML、CSS 和 JavaScript 构建
并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面
Vue的两个核心功能:
- 声明式渲染:Vue 基于标准 HTML 拓展了一套模板语法,使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系
- 响应性:Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM
声明式:我们之前写的代码都是编程式,例如利用Dom编程来实时更改页面数据,而声明式则可以直接绑定变量和标签
以非工程化的方式打开Vue3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 这里也可以用浏览器打开连接,然后将获得的文本单独保存进入一个vue.js的文件,导入vue.js文件即可 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
<!-- 给style属性绑定colorStyle数据 -->
<!-- {{插值表达式 直接将数据放在该位置}} -->
<h1 v-bind:style="colorStyle">{{headline}}</h1>
<!-- v-text设置双标签中的文本 -->
<p v-text="article"></p>
<!-- 给type属性绑定inputType数据 -->
<input v-bind:type ="inputType" value="helloVue3"> <br>
<!-- 给按钮单击事件绑定函数 -->
<button @click="sayHello()">hello</button>
</div>
<script>
//组合api
const app = Vue.createApp({
// 在setup内部自由声明数据和方法即可!最终返回!
setup(){
//定义数据
//在VUE中实现DOM的思路是: 通过修改修数据而影响页面元素
// vue3中,数据默认不是响应式的,需要加ref或者reactive处理,后面会详细讲解
let inputType ='text'
let headline ='hello vue3'
let article ='vue is awesome'
let colorStyle ={'color':'red'}
// 定义函数
let sayHello =()=>{
alert("hello Vue")
}
//在setup函数中,return返回的数据和函数可以在html使用
return {
inputType,
headline,
article,
colorStyle,
sayHello
}
}
});
//挂载到视图
app.mount("#app");
</script>
</body>
</html>
前端的一些关键字:
- {{}}:插值表达式
- v-bind:style属性:绑定css样式
- v-text属性:绑定双标签中的文本
- v-bind:type属性:绑定标签中type属性
- @click:绑定单击事件触发的函数
后端的写法:
const app = Vue.createApp({
// 在setup内部自由声明数据和方法即可!最终返回!
setup(){
// 定义type属性
let inputType ='text'
// 定义style属性
let colorStyle ={'color':'red'}
// 定义函数
let sayHello =()=>{
alert("hello Vue")
}
//在setup函数中,return返回的数据和函数可以在html使用
return {
inputType,
colorStyle,
sayHello
}
}
});
//挂载到视图
app.mount("#app");//通过id选择器挂载到id为app的div上
在这里我们只需要大概的体会一下vue框架中的功能以及他的固定写法
Vite
Vite工具主要是用来管理/建立前端工程化的项目模板/规范
Vite和npm组合起来就相当于后端的Maven
Vite的特点与优势:
-
快速创建项目:使用脚手架可以快速搭建项目基本框架,避免从零开始搭建项目的重复劳动和繁琐操作,从而节省时间和精力。
-
统一的工程化规范:前端脚手架可以预设项目目录结构、代码规范、git提交规范等统一的工程化规范,让不同开发者在同一个项目上编写出风格一致的代码,提高协作效率和质量。
-
代码模板和组件库:前端脚手架可以包含一些常用的代码模板和组件库,使开发者在实现常见功能时不再重复造轮子,避免因为轮子质量不高带来的麻烦,能够更加专注于项目的业务逻辑。
-
自动化构建和部署:前端脚手架可以自动进行代码打包、压缩、合并、编译等常见的构建工作,可以通过集成自动化部署脚本,自动将代码部署到测试、生产环境等。
简单的说,Vite工具的功能就是便于前端项目的创建、编写、管理、部署
使用Vite创建前端工程化项目
- npm create vite:新建Vite项目
新建好Vite项目后,我们会发现pakage.json目录下记录了本项目所需的依赖,所以我们根据文件的记录给依赖安装一下
- npm install:根据pakage.json目录安装依赖
注:我们需要先使用cd命令进入项目的目录,再安装依赖
- npm run:使用dev/build/preview运行该项目
在学习Vite之前,我们针对于前端代码的预览是使用vscode的golive插件,而从今天开始,我们使用npm run dev来进入开发模式
关于JS和TS的选择问题
TS(Typescript)是JS的一个超集,使用TS之后,JS的语法更加的像JAVA
在实际开发之中,TS的使用更多一点,但我们不着急去学习TS,原因如下:
-
为了降低难度,提高前端工程化的效率
-
对于学JAVA的我们来说,学习TS非常容易,但是还是需要一些时间
-
TS不是非学不可,不用TS仍然可以正常开发工程化的前端项目
Vite项目的目录结构
-
node_modules:npm安装的框架及所需依赖的目录
-
public:用于存放一些公共资源,例如:HTML文件、图像、子图,这些资源会被直接复制到构建出的目标目录中
-
src:存放项目的源代码,包括 JavaScript、CSS、Vue 组件、图像和字体等资源。在开发过程中,这些文件会被 Vite 实时编译和处理,并在浏览器中进行实时预览和调试
- assets:于存放一些项目中用到的静态资源,如图片、字体、样式文件等
- components:用于存放组件相关的文件,组件是代码复用的一种方式,用于抽象出一个可复用的 UI 部件,方便在不同的场景中进行重复使用
- layouts:用于存放布局组件的文件,布局组件通常负责整个应用程序的整体布局,如头部、底部、导航菜单等
- pages:用于存放页面级别的组件文件,通常是路由对应的组件文件,在这个目录下,可以创建对应的文件夹,用于存储不同的页面组件
- plugins:用于存放 Vite 插件相关的文件,可以按需加载不同的插件来实现不同的功能,如自动化测试、代码压缩等
- router:用于存放 Vue.js 的路由配置文件,负责管理视图和 URL 之间的映射关系,方便实现页面之间的跳转和数据传递
- store:用于存放 Vuex 状态管理相关的文件,负责管理应用程序中的数据和状态,方便统一管理和共享数据,提高开发效率
- utils:用于存放一些通用的工具函数,如日期处理函数、字符串操作函数等
-
package.json:node.js配置文件,包含了项目的基本信息和依赖关系
-
vite.config.js:Vite 的配置文件,可以通过该文件配置项目的参数、插件、打包优化等
设置运行时端口号
//修改vite项目配置文件 vite.config.js
export default defineConfig({
plugins: [vue()],
server:{
port:3000
}
})
Vite项目组件(SFC入门)
Component中文释义:元件
SFC(Single-File Component)单文件组件
Vue组件:
- 一个页面作为整体,是由多个部分组成的,每个部分在这里就可以理解为一个组件
- 每个.vue文件就可以理解为一个组件,多个.vue文件可以构成一个整体页面
- 组件化给我们带来的另一个好处就是组件的复用和维护非常的方便
Vue文件:
-
传统的页面有.html文件.css文件和.js文件三个文件组成(多文件组件)
-
vue将这文件合并成一个.vue文件(单文件组件)
-
.vue文件对js/css/html统一封装,该文件有三个部分构成:
- template标签:代表组件的html部分代码(代替传统的.html文件)
- script标签:代表组件的js代码(代替传统的.js文件)
- style标签:代表组件的css样式代码(代替传统的.css文件)
<script>
</script>
<template>
</template>
<style>
</style>
template中文释义:模板
工程文件的关系
index.html
按照我们之前的思路,查看index.html文件,发现其中内容如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
我们发现,其中并没有实质性的内容能展现丰富的内容页,但存在关键两行代码
<div id="app"></div>
<!-- 以模块化方式导入js文件 -->
<script type="module" src="/src/main.js"></script>
main.js
我们查看这个被导入的js文件,内容如下:
//从vue框架中导入函数:createApp
import { createApp } from 'vue'
//导入全局样式文件,该文件中的样式或作用到所有的.vue元素上
import './style.css'
//导入App.vue组件 并起别名为App
import App from './App.vue'
//使用App.vue(别名APP)作为形参,使用createApp的函数生成一个对象,再将这个对象挂载到id值为app的元素上
createApp(App).mount('#app')
这个文件的作用,就是将App.vue的组件,挂载到id值为app的元素上
App.vue
相同的,App.vue中也可以导入别的.vue组件,实现组件嵌套
其导入方式和ES6的模块化导入大致相同
在使用时,直接将导入的vue模块当作HTML中的单标签使用
<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
……
<HelloWorld msg="Vite + Vue" />
</template>
<style scoped>
……
</style>
注:.vue组件中,语法上要求template只能有一个一级子标签,但语法报错并不影响vue3的正确运行
[vue/no-multiple-template-root]
The template root requires exactly one element.eslint-plugin-vue
Css样式的导入方式
我们可以在.vue组件的style标签下直接编写为该组件修饰的css样式
同时,我们也可以在src下建立style目录,专门存放css样式文件,有哪个组件需要用,则由该组件调用
相当于把css样式文件也模块化
正如我们在main.js中导入全局css文件那样,直接在script中使用import标签导入css文件
import './style/style.css'
如果是在.vue文件中,除了上述方法(script外部文件导入),也可以在script标签中使用@import方式导入css文件
<style scoped>
@import './style/style.css'
</style>
响应式入门和setup函数
响应式数据:在数据变化时,vue框架会将变量最新的值实时更新到dom中
-
在vue2中,数据不做特殊处理,默认就是响应式数据
-
在vue3中,数据经过ref/reactive函数的处理才是响应式数据
- ref/reactive函数是vue3中给我们提供的方法,导入进来即可使用
注:ref处理的响应式数据,在操作时需要注意:
在script中操作时,要使用.value的形式操作
在template中操作时,无需使用.value的形式操作
<script>
import {ref} from "vue"
export default {
setup() {
let counter = ref(1);
function counterIncr() {
counter.value++;
}
function counterDecr() {
counter.value--;
}
return {
counter,
counterIncr,
counterDecr,
};
},
};
</script>
<template>
<div>
<button @click="counterIncr">+</button>
<span v-text="counter"></span>
<button @click="counterDecr">-</button>
<button @click="showCounter"></button>
</div>
</template>
<style scoped>
</style>
setup
在vue3的非工程化打开中,我们大致知道了vue3的固定写法
我们将vue3则setup函数作为模块化处理的默认导出
再被import App from './App.vue'
导入到main.js文件中
最后通过createApp(App).mount('#app')
挂载到#app
元素使用
这样就实现了使用.vue文件(vite项目结构),工程化的实现了vue框架的使用
但是,vue&vite提供了setup关键字作为语法糖(类似注解),解决了每次需要默认暴露和setup函数的冗余代码,所以以上仍然是白学 😓
<script setup>
import {ref} from "vue"
let counter = ref(1);
function counterIncr() {
counter.value++;
}
function counterDecr() {
counter.value--;
}
</script>
<template>
<div>
<button @click="counterIncr">+</button>
<span v-text="counter"></span>
<button @click="counterDecr">-</button>
<button @click="showCounter"></button>
</div>
</template>
<style scoped>
</style>