天行健，君子以自强不息；地势坤，君子以厚德载物。
每个人都有惰性，但不断学习是好好生活的根本，共勉！
文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。
问余何意栖碧山，笑而不答心自闲。
桃花流水窅然去，别有天地非人间。
------《山中问答》
文章目录
- 一、Vue的概览
- 二、Vue的使用前提
- 三、Vue项目的构建方式
- 四、Vue项目构建的实例演示
- 五、vue-cli3下拉取2.x的模板（拓展，可忽略）
- 六、卸载vue脚手架
- 七、安装路由（拓展）
- 八、vue项目结构（拓展）
Node.js的下载、安装和配置
node的下载、安装、配置和使用（node.js下载安装和配置、npm命令汇总、cnpm的使用）
Vue3入门之创建vue3的单页应用(vite+vue)
Vue入门第一篇（环境配置、脚手架安装、项目创建、项目运行访问、项目结构详解等）
Vue入门第二篇（基本语法、实例演示）
Vue专栏
本篇包含内容如下：
简介、环境准备、脚手架安装、项目创建、项目运行访问、脚手架卸载、项目结构详解
Vue3是目前最新也是最主流的前段开发框架，本文主要为Vue3的介绍和使用
一、Vue的概览
该部分可参考Vue官网介绍
1. Vue.js 简介
摘录自Vue官网的介绍如下：
Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。
它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，
帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
1.1 创始人
项目的创建人：尤雨溪
1.2 版本
版本分为Vue、Vue2、Vue3
2016年Vue2发布
2020年Vue3发布
随着Vue2在2023年12月31日停止维护
后续的使用基本都是Vue3
1.3 读音
读音为view，并非v-u-e
1.4 特点
- 轻量的mvvm（model-view-viewmodel）框架，与angular、react类似，均为数据双向绑定的实现
- 数据驱动+组件化的前段开发
- 通过简单的API实现响应式的数据绑定和组合的视图组件
- 易上手，轻量化
1.5 核心特点
-
声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
-
响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。
1.6 Vue官网
官网地址
英文官网：https://vuejs.org/
中文官网：https://cn.vuejs.org/
2. vue与angular的区别
2.1 angular的特点
- 上手较难
- 指令以ng-xxx开头
- 所有属性和方法都存储在$scope中
- 由google维护
2.2 vue的特点
- 简单、易学、轻量
- 指令以v-xxx开头
- HTML代码+JSON数据，再创建一个vue的实例
2.3 共同点
- 都不兼容低版本IE
总结对比，github中vue使用更多
3. vue的几个概念
3.1 渐进式框架
无需构建步骤，渐进式增强静态的HTML
在任何页面中作为Web Components嵌入
单页应用（SPA）
全栈/服务端渲染（SSR）
Jamstack/静态站点生成（SSG）
开发桌面端、移动端、WebGL，甚至是命令行终端的界面
3.2 单文件组件
以.vue结尾的文件就是单文件组件，是一种类似HTML格式的文件的Vue组件
单文件组件英文名称为：Single-File Components
缩写为SFC
Vue单文件组件将一个组件的逻辑（JavaScript）、模板（HTML）和样式（CSS）封装在同一个文件中
3.2 API风格
vue的组件有两种风格，选项式API和组合式API
3.2.1 选项式API
Options API
可使用包含多个选项的对象来描述组件的逻辑，如data、methods、mounted
选项所定义的属性会暴露在函数内部的this上，他会指向当前的组件实例
3.2.2 组合式API
Composition API
可使用导入的API函数来描述组件逻辑，单文件组件中，组合式API会与<script setup>搭配使用
setup attribute是一个标识，让vue需要在编译时进行处理，让我们更简洁的使用组合式API
3.2.3 两个种风格的选择
两种风格的底层系统相同
选项式API是在组合式API基础上实现的，vue的基础知识在两种api中是通用的
选项式API与面向对象的思想更为贴近
组合式API更为灵活
选项式API更易理解和上手
在vue的官网可自由切换两种api风格的文档
根据自己需要选用即可
二、Vue的使用前提
1. 前端基础
最好是对前端基础HTML/CSS/JS有一定的了解后再进行Vue的学习和使用
html相对简单，css也是固定格式，js相对有点难度，不过如果你有Java基础，那么js也不是很难，语法很像
关于JS的学习可以参考
入门：JS（JavaScript）入门指南
专栏：JavaScript
2. Node环境
vue的使用需要node环境
node的版本需18.3及以上
node环境的安装配置可参考：
Node.js的下载、安装和配置
三、Vue项目的构建方式
node.js环境安装配置后，方可使用vue
以下介绍Vue项目的几种构建方式，后续会根据这几种构建方式实例演示Vue项目的构建。
关于Vue3的构建方式有两种，一种是新兴的基于Vite构建项目，一种是原来的基于Vue CLI构建项目
在Vue的官网教程中，已经默认使用了Vite进行项目的构建，故今后Vite应该会是主流，毕竟它启动更快，效率更高。
1. Vue3基于Vite构建项目
1.1 介绍
在Vue3的版本中，构建项目已经可以使用Vite构建了，Vite是由原生ES Module驱动的，利用浏览器原生ES Module支持来提供快速的开发体验，Vite在开发环境下无需打包项目，构建速度更快，开发效率更高。
1.2 构建流程
创建项目
npm create vue@latest
选择配置项
根据需要选择需要配置的选项
进入项目目录
cd 项目名称
安装模块
npm install
运行项目
npm run dev
2. Vue3基于CLI构建项目
关于vue cli的安装如果遇到了文件权限无法写入的情况，可在管理员权限下进行（以管理员身份运行cmd窗口）
2.1 介绍
Vue CLI是vue.js的标准开发工具，CLI是Command Line Interface的缩写
Vue CLI具有丰富的配置、插件、预设等功能
2.2 构建流程
全局安装Vue CLI脚手架
npm install -g @vue/cli
创建项目（项目名称全小写）
vue create 项目名称
选择配置项
根据需要选择需要配置的选项
进入项目目录
cd 项目名称
安装模块
npm install
运行项目
npm run serve
原文链接: https://hanshan.blog.csdn.net//article/details/140495754