文章目录
目录
前言
大家好，我是遇见ice。
个人主页：遇见ice的博客
本文讲了有关Vue3的简介和安装的知识，从今天开始更新Vue，大家一起学习吖~
走过路过的小伙伴们点个赞和关注再走吧，欢迎评论区交流。
大家一起成长呀！笔芯
Vue简介
Vue (读音/vju: /，类似于view)是一套用于构建用户界面的渐进式框架。
渐进式框架是指Vue不强制开发者掌握和使用全部功能特性，可以根据项目需求逐步增加功能。比如:简单项目中可以只使用基础特性，如页面渲染、表单数据绑定等。页面较多的项目，可以引入组件特性，实现代码复用。大型项目还可以引入生态组件实现路由切换和状态集中管理等。
Vue本身不是一个全能框架——它只聚集于视图层。Vue采用自底向上增量开发的设计。
Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件
在与相关工具和支持库一起使用时，Vue能完美地驱动复杂的单页应用。比。如Vue Router、Vuex及一些第三方组件。
作者:尤雨溪（华人)前Google员工（一个很厉害的大佬）
可通过如下网址访问官方地址
Vue.js - The Progressive JavaScript Framework | Vue.js
Vue.js - The Progressive JavaScript Framework | Vue.js
建议先学知识：HTML、CSS、JavaScript
Vue发展史
Vue.js的发展里程碑
2013年12月24日，发布0.7.0
2014年1月27日，发布0.8.0
2015年10月27日，正式发布1.0.0
2016年4月27日，发布2.0的preview版本
2016年10月，2.0正式发布
2019年12月5日，尤雨溪公布了Vue 3源代码
2020年9月18日，3.0正式发布
简单示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="hello-vue" class="demo">
{{ message }}
</div>
<script>
const HelloVueApp = {
data() {
return {
message: 'Hello Vue!!'
}
}
}
Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
</body>
</html>Vue兼容性
Vue2.x兼容性
Vue2.x不支持IE8及其以下版本，因Vue使用了IE8不能实现的ECMAScript5特性Vue2.x支持所有兼容ECMAScript5的浏览器
Vue3.x(使用Vite搭建兼容性)
开发环境中:需要在支持原生ES模块动态导入的浏览器中使用。
生产环境中:默认支持的浏览器需要支持通过脚本标签来引入原生ES 模块。可以通过官
方插件@vitejs/plugin-legacy支持旧浏览器。
Vue安装方式
Vue.js 设计的初衷就包括可以被渐进式地采用。这意味着它可以根据需求以多种方式集成到一个项目中。
新建一个项目，用的WebStorm.
并在项目中创建如下格式
将 Vue.js 添加到项目中主要有四种方式：
1.在页面上以 CDN 包的形式导入。
可直接引入代码
<script src="https://unpkg.com/vue@next"></script>示例如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="App">
{{message}}
</div>
<script>
const Hello={
data(){
return{
message:"Hello Vue!"
}
}
}
Vue.createApp(Hello).mount('#App')
</script>
</body>
</html>
2.下载 JavaScript 文件并自行托管。
也就是脚本安装。
访问网址：https://unpkg.com/vue@next会出现如下形式的代码
右键另存为，找到新建的项目，并存储在下边的js中
为了方便更改一下名字为vue.js
在index.HTML文件即可通过如下代码引入地址
<script type="text/javascript" src="js/vue.js"></script>可通过以下示例进行测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="App">
{{message}}
</div>
<script>
const Hello={
data(){
return{
message:"Hello Vue!"
}
}
}
Vue.createApp(Hello).mount('#App')
</script>
</body>
</html>3.使用 npm 安装它。
在大型应用中推荐使用NPM来安装Vue.js
可通过如下WebStorm新建项目直接拉取安装
以上过程中可能无node,可在这个网址下载
NPM能很好的与模块（诸如Webpack或Browserify的CommonJS模块）打包配合使用Vue同时提供了脚手架工具，可以更方便快捷的搭建开发环境。
$ npm install vue@next
由于 npm 安装速度慢，也可以使用了淘宝的镜像及其命令 cnpm，
$ cnpm install vue@next
4.官方的 CLI
Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。它为现代前端工作流程提供了功能齐备的构建设置 (例如，热重载、保存时的提示等等)。
对于 Vue3，使用 npm 上可用的 Vue CLI v4.5 作为 @vue/cli。要升级需要全局重新安装最新版本的 @vue/cli：
# 全局安装 vue-cli
yarn global add @vue/cli
# 或
cnpm install -g @vue/cli
安装完后查看版本:
$ vue --version
@vue/cli 4.5.11
然后在 Vue 项目中运行：
vue upgrade --next
注：我们可先简单使用第二种方式CDN安装。可查看官方教程学习，网址如下：