vue-cli3中拉取vue-cli2

拉取 2.x 模板 (旧版本)

Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

创建一个项目 | Vue CLI

runtime+compiler 和 runtime-only 的区别：在main.js文件中

  /**
   *等价于
  render: function(h) {
    return h(App);
  }
    等价于
  render: function(createElement) {
    return createElement('h2');
  }
  */

1.如果在开发中使用的是 template ，就需要选 runtime-compiler

2.如果在开发中使用的是 .vue 文件夹，就需要选 runtime-only (比上面那种模式轻大约 6KB，但是 template (或任何特定于vue的html)只允许在 .vue 文件中使用------其他地方用需要 render 函数; .vue 文件中的template也是被 vue-template-compiler 翻译成了render函数，所以只能在.vue里写 template)

3.runtime-compiler 的vue程序运行过程：

template---------------->ast------------->render---------------->vdom------------------>UI

(模板) 解析 (抽象语法树) 编译 (render函数) 形成 (虚拟DOM) 转成 (真实DOM)

4.runtime-only的vue程序运行过程：

render------------------->vdom-------------->UI

(render函数) 形成 (虚拟DOM) 转成 (真实DOM)

5.runtime-only 的性能更高、代码量更少

vue3创建项目

1 使用 vue-cli 创建

文档: 创建一个项目 | Vue CLI

## 安装或者升级
npm install -g @vue/cli
## 保证 vue cli 版本在 4.5.0 以上
vue --version / vue -V
## 创建项目
vue create my-project

2 使用 vite 创建

文档: https://v3.cn.vuejs.org/guide/installation.html
vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，
它做到了***本地快速开发启动***, 在生产环境下基于 Rollup 打包。
- 快速的冷启动，不需要等待打包操作；
- 即时的热模块更新，替换性能和模块数量的解耦让更新飞起；
- 真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变。
  
  npm init vite-app <project-name>
  cd <project-name>
  npm install
  npm run dev

Vue2 中的 html 模板中必须要有一对根标签，Vue3 组件的 html 模板中可以没有根标签

vscode 中 Vue3中没有根标签报错(插件检测导致)设置：

文件 ==> 首选项 ==> 设置

3 使用 pnpm 创建

node -v 查看

步骤：

npm i -g pnpm 全局安装 pnpm

pnpm create vite 创建项目；依次输入/选择项目名、vue、ts

cd 项目名

pnpm install 安装项目的依赖

pnpm run dev 运行项目

配置运行项目后自动在浏览器中打开项目：

package.json 中添加 --open

看了那么多的vue.js的安装方式总结一下。如有不多请多多指教！希望给您带来帮助~~