1.vue学习笔记(vue简介+API风格+开发前的准备)

1.介绍

1.一款用于构建用户页面的JavaScript框架
2.基于HTML、CSS、JavaScript
3.官方文档：cn.vuejs.org

2.渐进式框架

1.注重灵活性/可被逐步集成
根据需求场景：1.无需构建步骤，渐进式增强静态的HTML2.在任何页面中作为Web Components嵌入（组件）3.单页应用（SPA）（整个应用只有一个页面）4.全栈/服务端渲染（SSR）5.Jamstack/静态站点生成（SSG）6.开发桌面端，移动端，WebGL，命令行终端中的界面

3.版本问题

1.两大版本Vue2/Vue3Vue3涵盖了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 } = VuecreateApp({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 } = VuecreateApp({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扩展插件