Vue 前端小白了解并运用Vue3 + Vite 及 Vue-cli 4项目搭建_vue3 vite vue-cli-service(1)

学习笔记

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML/CSS

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

HTML5 /CSS3

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

• 一个丰富的官方插件集合，集成了前端生态中最好的工具。
• 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

Vite 概述

让项目更快！

Vite 是一个基于 Vue3 单文件组件的非打包开发服务器，它做到了本地快速开发启动：

• 快速的冷启动，不需要等待打包操作；
• 即时的热模块更新，替换性能和模块数量的解耦让更新飞起；
• 真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变。

安装相应工具

1、更新 npm 到最新版本
Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)

命令运行

npm install -g npm

npm 就自动为我们更新到最新版本
 
更新完成之后，以管理员身份打开 cmd 管理工具，输入 node -v ，回车，可查看 node 版本号.

2、安装全局 Vue-CLI4.x 脚手架
首先查看我们当前 Vue CLI 版本号，在命令行输入

vue -V

如果出现2.X.X，则说明我们现在安装的 Vue-CLI2；
然后我们就需要更新升级了，命令行输入以下命令，回车；

npm install -g @vue/cli

再次查看 Vue-CLI 的版本号4.x.x，则说明更新成功；

3、安装全局 Vue 3.x

命令运行

$ npm install vue@next

Vue3 + Vue CLI 4 搭建项目

1、通过 Vue-CLI4 创建一个 vue 项目
进入你需要创建项目的文件夹，打开命令行。

输入以下命令，回车

最后

由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】