vue2
小伙伴们可能疑问vue3已经有了那么久了为什么还要介绍vue2，介绍vue2的原因是因为公司有些老项目还是使用的vue2,除此之外在vue2.0中完全兼容IE10以上,部分兼容IE9,只是不支持IE8及一下版本,Vue的响应式原理是基于es5的Object.defineProperty的，而这个方法不支持ie8及以下的版本，vue2有着较好的兼容性。
首先推荐Vue Devtools
在使用 Vue 时，我们推荐在你的浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。
edge是可以直接安装的但是谷歌是打不开的，大家可以找一下网上的教程或者文件将它拖到扩展程序即可。
vue2官网Vue.js
1.以下方式CDN方式引入的，推荐去官网复制。
//对于制作原型或学习，你可以这样使用最新版本：
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
//对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
//如果你使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件：
<script type="module">
import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.esm.browser.js'
</script>2.或者引入js文件
<script src="./vue.js"></script>
<script src="./vue.min.js"></script>一种即可，min是生产版本的小一点。以上引入vue了，接下来是使用，直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。
通过以下方法创建vue实例
<body>
<div id="app">{{username}}</div>
</body>
<script>
//创建vue实例
const vm = new Vue({
//绑定id选择器app
el: '#app',
//数据
data: {
name: '黄小米'
},
methods:{}
})
</script>
3.在vue-cli中使用
使用vue create 创建项目
脚手架自己生成的
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
4.在 NPM 包的 dist/ 目录你将会找到很多不同的 Vue.js 构建版本。这里列出了它们之间的差别：
PS D:\web\practice\hello_Vue> npm install vue --save-dev
added 21 packages in 1s
PS D:\web\practice\hello_Vue> 
这里的包也是可以引入使用的
5.vue init
vue init 是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目，webpack是官方推荐的标准模板名。vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下，老项目的src目录覆盖3.x的src目录(如果修改了配置，可以查看文档，用cli3的方法进行配置)
vue3
官方文档Vue.js - 渐进式 JavaScript 框架 | Vue.js
1.以下方式CDN方式引入的，还是推荐去官网复制。
<script src="https://unpkg.com/vue@3"></script>
<div id="app">{{ message }}</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>2.使用vuecli
vue create huangxiaomi1
vue create huangxiaomi1vue create 是vue-cli3.x的初始化方式，目前模板是固定的，模板选项可自由配置，创建出来的是vue-cli3的项目，与cue-cli2项目结构不同，配置方法不同，具体配置方法参考官方文档。
你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。
使用create命令，有3种可选项：vue3、vue2、手动选择。
自动生成的是这样的
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
3.使用npm init vue@latest方法（这个方法创建的是最新版vue比方法2的vue版本更新）
npm init vue@latest创建项目命令后面跟的是项目名称,但是我们需要注意的是,项目名中不能有大写字母。
4.vite
Vite 优势：
1.vite 开发服务器启动速度比 webpack 快
2.webpack 会先打包，然后启动开发服务器，请求服务器时直接给予打包结果。
3.vite 在启动开发服务器时不需要打包，也就意味着不需要分析模块的依赖、不需要编译，因此启动速度非常快。当浏览器请求某个模块时，再根据需要对模块内容进行编译。这种按需动态编译的方式，极大的缩减了编译时间，项目越复杂、模块越多，vite的优势越明显。
4.由于现代浏览器本身就支持ES Module，会自动向依赖的Module发出请求。vite充分利用这一点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像webpack那样进行打包合并。
5.vite 热更新比 webpack 快
6.在 HMR 方面，当改动了一个模块后，vite仅需让浏览器重新请求该模块即可，不像webpack那样需要把该模块的相关依赖模块全部编译一次，效率更高。
7.vite 使用esbuild(Go 编写) 预构建依赖，比 webpack 的 nodejs，快 10-100 倍。
Vite 劣势：
1.生态不及webpack，加载器、插件不够丰富
2.打包到生产环境时，vite使用传统的 rollup（也可以自己手动安装webpack来）进行打包
3.项目的开发浏览器要支持 ES Module，而且不能识别 CommonJS 语法
npm init vite huangxiaomi3 -- --template vue
有一说一最后一种真的快
好了本篇文章就到这里了，喜欢的话可以关注我，会持续更新的，有错误欢迎大家指出，大家可以在我这里互相讨论学习，一起进步。
青山不改 绿水长流 我们下篇文章见😋