>[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)