1、Vue CLI
Vue CLI 又被称为 Vue 的脚手架
全称 Command-Line Interface,翻译为命令行界面
我们可以通过 CLI 选择项目的相关配置,然后创建出我们的项目
由于已经内置了 webpack 的相关配置,所以我们不需要从零开始配置
1.1 安装和使用
打开终端,进行全局安装
npm install -g @vue/cli
升级全局的 Vue CLI 包
npm update -g @vue/cli
运行以下命令来创建一个新项目:
vue create 项目的名称
创建完成之后,我们可以看到如下的目录结构:
简单介绍一下入口文件 main.js:
// 这里是入口文件
// 在这个文件里面,我们引入了 App 组件
// 入口文件实现对引入组件的渲染
// 渲染好的组件,最终在 public 目录下的 index.html 中进行展示
import { createApp } from 'vue'
import App from './App.vue'
// createApp(App):注册引入的 App 组件
// 然后挂载到 index.html 中 id 为 app 的元素中
createApp(App).mount('#app')
// 也可以这样写
// createApp({ 直接在这里面写 App 组件中的内容 }).mount('#app')
原理 ?
2、Vite
Vite 是一种新型前端构建工具
官方给出的定位是:下一代前端开发与构建工具
它主要由两部分组成:
- 一个开发服务器,它基于 原生 ES 模块 提供了 丰富的内建功能
- 一套构建指令,它使用 rollup 打包你的代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资源
Vite 的生态目前还不完善
待更...