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

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扩展插件