vue是什么？
- 官方介绍：vue官网 🧡
- Vue是一套用于构建用户界面的渐进式框架。
- Vue 被设计为可以自底向上逐层应用，并且其核心库只关注视图层。
- Vue 能够为复杂的单页应用提供驱动。
vue对移动端和浏览器版本支持
vue采用ES5的特性，所以浏览器兼容问题不容忽视！
- 红色：几乎不支持
- 黄色：大部分支持（有很小的可能会影响使用）
- 绿色：几乎全部支持（不影响使用）
IE9部分支持，IE9以下就不用考虑兼容了，其他浏览器支持都还不错，可以放心使用，一些老旧的政府网站就不用考虑了！
如何初始化一个Vue项目？
目前vue已经更新到了3.0版，与2.x版某些地方有所改变，但对于初学无所谓哪个版本，只要掌握了其中一个版本，理解了其思路，升级版只是对之前版本的完善，看文档即可学会！
- 直接通过
<script>标签引入,开发时引入开发版，部署时更换为生产环境版本;
// 开发环境版本，包含了有帮助的命令行警告
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
// 生产环境版本，优化了尺寸和速度
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
- 通过npm的方式引入
通过npm引入必须先安装node.js，安装npm
npm install vue
一般在使用 Vue 来构建大型项目的时候，通常会通过npm + vue-cli + webpack的方式进行项目初始化。
vue-cli创建vue项目
- 安装vue-cli脚手架
// 安装脚手架
npm install -g @vue/cli
// 升级脚手架
npm update -g @vue/cli
- 创建一个项目
// myvue为自己的项目名称
vue create myvue
终端会出来如图所示的选项，Default为默认配置，现在默认配置多了两个版本选择，是使用vue2还是选择vue3，这里先选择vue2的默认选项！箭头键上下选中，回车！
- 查看项目
// 进入项目文件夹
cd myvue
// 运行命令查看
npm run serve
访问：http://localhost:8080/ 即可查看到vue的默认首页！
思考： 脚手架方式创建的项目是否可以通过<script>标签引入vue ?
答案是：可以的！
在通过 npm run build 方式打包完成之后，可以在index.html文件中通过CDN的方式引入，可以尽量的避免服务器中的流量流出，一般个人服务器可能带宽只有1M，这种方式多少还是有些效果的。
vue的代码结构
- 非单文件组件（.js文件）;
这种文件指的是我们直接通过
<script>标签引入vue而创建的，js是可以直接被浏览器解析的！
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue学习</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{
{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
可以运行这个文件看看效果，vue连接了视图和数据，当数据改变时，视图中的数据也会跟随改变，可以试着改变dada中的message 的值看看效果！
所以这个#app是视图层
<div id="app">
{
{ message }}
</div>
<script>包裹起来的dada部分为model层，即数据层！
data: {
message: 'Hello Vue!'
}
这种方式在 Vue 中被称作声明式渲染。
另外，如果要在vue中定义一些方法，则需要使用到vue提供的methods声明，如下：
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
methodsName: function (event) {
...
}
}
});
同样，如果要监听 Vue 的生命周期或者计算属性的话，也同样以这种方式来声明即可。
- 单文件组件（.vue文件）;
这种方式是vue推崇的一种方式，即模块化开发，便于维护，单个组件拆分。
这才是vue真正强大之处，在vue中的这种模块化方式，被称为单文件组件（.vue文件），即每一个组件都被拆分成了一个个.vue文件，需要用到的时候直接引入即可！
先来看一下单文件组件（.vue 文件）的文件结构。
<template>
// html
</template>
<script>
// js
</script>
<style>
// css
</style>
每个单文件都是一个组件，由 html/js/css 三部分构成，每个组件的css以及js只影响组件本身，对全局毫无影响，这就优势非常明显，代码耦合度低，组件化，一次开发，可重复使用，更利于团队开发和维护！
缺点： 这种单文件后缀为.vue，浏览器无法直接解析，这就需要借助外部工具，也就是借助我们安装的vue-cli和webpack的原因之一。
今天就大概学习这些，明天我们继续学习整理，项目中生成的每个文件都是用来干什么，有什么用！
感谢您的阅读，如果对您有帮助，欢迎关注"CRMEB"。码云上有我们开源的商城项目，知识付费项目，均是基于PHP+vue+mysql开发，学习研究欢迎使用，老铁顺手点个star呗，老板会奖励我5毛，分你0.25，😂😂关注我们保持联系！
转载：https://blog.csdn.net/CRMEB/article/details/111190822