1.介绍
1.一款用于构建用户页面的JavaScript框架
2.基于HTML、CSS、JavaScript
3.官方文档:cn.vuejs.org
2.渐进式框架
1.注重灵活性/可被逐步集成
根据需求场景:
1.无需构建步骤,渐进式增强静态的HTML
2.在任何页面中作为Web Components嵌入(组件)
3.单页应用(SPA)(整个应用只有一个页面)
4.全栈/服务端渲染(SSR)
5.Jamstack/静态站点生成(SSG)
6.开发桌面端,移动端,WebGL,命令行终端中的界面
3.版本问题
1.两大版本
Vue2/Vue3
Vue3涵盖了Vue2知识体系,Vue3增加了新特性
4.vue组件风格书写
4.1.选项式API(VUE2)
可以包含多个选项的对象来描述组件的逻辑,如data,methods和mounted。选项
所定义的属性会暴露在函数内部的this上,他会指向当前的组件实例
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">{{ message }}</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>
4.2.组合式API(VUE3)
可以使用导入的API函数来描述组件逻辑
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">{{ message }}</div>
<script>
const { createApp, ref } = Vue
createApp({
setup() {
const message = ref('Hello vue!')
return {
message
}
}
}).mount('#app')
</script>
5.如何选择
1.当你不需要使用构建工具,或者打算主要在低复杂度的场景中使用VUE,例如渐进增强的应用场景,
推荐采用选项式API
2.当你打算用VUE构建完整的单页应用,推荐采用组合式API+单文件组件
6.开发前的准备
1.熟悉命令行
2.已安装15.0或更高版本的Node.js
7.创建vue项目
1.命令行找到要放置代码的位置
npm init vue@latest
这一指令将会安装并执行create-vue,它是官方的项目脚手架工具
配置项:
Project name(项目名称):(不要存在大写);
Add TypeScript(是否添加ts):(默认是NO);
Add JSX Support(是否添加支持JSX语法):(默认是NO);
Add Vue Router for Single Page Application development(是否添加vue路由):(默认NO);
Add Pinia for state management(是否添加Pinia状态管理):(默认是NO);
其他配置都是测试文件全默认NO;
后须可以进行开发了
8.开发环境
1.推荐的IDE配置是 VSCode + Volar扩展插件