>[success] # 快速使用vue-cli 1. 一般我们会通过`webpack `构建项目但是，能每一个项目从头来完成所有的`webpack`配置，这样显示开发的效率会大大的降低，常会使用**脚手架**来创建一个项目，帮助我们搭建项目的工具（**会构建 项目基本目录解构，基本配置，基本使用的包等**) 2. `Vue`的脚手架就是`Vue CLI`，`CLI`是`Command-Line Interface`, 翻译为**命令行界面**，通过`CLI`选择项目的**配置和创建出我们的项目**，`Vue CLI`已经内置了**webpack相关的配置，我们不需要从零来配置** * 安装 ~~~ npm install @vue/cli -g ~~~ * 临时安装 ~~~ npx @vue/cli ui ~~~ * 使用 ~~~ Vue create 项目的名称 ~~~ 或者 ~~~ Vue ui ~~~ >[danger] ##### 以Vue create 项目的名称 为例子     >[danger] ##### 创建后的简单项目解构目录介绍 ~~~js |-- README.md | -- .browserslistrc -------设置目标浏览器 |-- babel.config.js ------- babel 的配置文件 |-- jsconfig.json |-- package-lock.json |-- package.json |-- public ------ 项目中一些资源 | |-- favicon.ico | `-- index.html |-- src ---------- 源码编写 | |-- App.vue | |-- assets | | `-- logo.png | |-- components | | `-- HelloWorld.vue | `-- main.js `-- vue.config.js ~~~ 1. `vue.config.js` 用来配置打包配置项，例如 ~~~ const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, configureWebpack: { // 配置webpack 一些配置项目 resolve: {}, }, }) ~~~ 2. 和 早期使用脚手架创建项目不同，项目中会 `jsconfig.json` 文件，给`VSCode`来进行读取, `VSCode`在读取到其中的内容时, 给我们的代码更加友好的提示[可参考](https://juejin.cn/post/6930549887402672135) >[danger] ##### 关于编译 1. 使用cli 时候使用的vue 版本并非内置编译器的版本，而是利用 `vue-loader` ，作为是一个 `webpack `的 `loader`，它允许你以一种名为单文件组件 (SFC) 的格式撰写 Vue 组件。它会解析组件中的所有相关的语言，包括 HTML、CSS 和 JavaScript，并将它们编译为可在浏览器中使用的 JavaScript 模块 * 如果你在 `cli `项目中使用 `template `模板你会遇到报错信息，`Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js". ` ~~~ import { createApp } from 'vue' // import App from './App.vue' const App = { template: `<h2>Hello Vue3 App</h2>`, data() { return {} }, } createApp(App).mount('#app') ~~~ 因为上面版本中导入的vue 并没有内置编译器，因此不能识别想让其变得好用两种方法 * 使用 编译器版本的`vue` ~~~ import { createApp } from 'vue/dist/vue.esm-bundler.js' // import App from './App.vue' const App = { template: `<h2>Hello Vue3 App</h2>`, data() { return {} }, } createApp(App).mount('#app') ~~~ * 使用 `SFC` 格式文件 ~~~ import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app') ~~~ >[success] # vite 1. vue 也提供了 `vite `版本 创建工程化的方式，`npm init vue@latest`，`npx create-vue@next`，原理可以[参考](https://juejin.cn/post/7133992076735152136#heading-13) [vue3官网参考位置](https://cn.vuejs.org/guide/quick-start.html#creating-a-vue-application)