Vue2.0已經(jīng)更新至Vue3及以上了，版本逐步趨于穩(wěn)定
保存日期：Vue 3 將于 2022 年 2 月 7 日星期一成為新的默認版本。Vue官方推特.png
一、前端Vue.js環(huán)境配置參考
一、項目創(chuàng)建
1.0、使用webpack創(chuàng)建項目
vue init webpack my-project(項目名字)
使用上面webpack命令創(chuàng)建項目之后會詢問你項目相關信息
? Project name my-project //設置項目名稱
? Project description my-project app //設置項目描述
? Author Martyr //設置作者 直接確定就行了，一路扛戳
? Vue build standalone //使用標準的文件或是壓縮過的文件（標準）
? Install vue-router? //是否安裝vue-router（路由）填Yes
? Use ESLint to lint your code? //是否使用語法檢查器（檢查十分嚴格） 填No
? Pick an ESLint preset Standard //用何種（選擇標準即可） 選擇No
? Set up unit tests //是否使用單元測試 填NO
? Setup e2e tests with Nightwatch? //是否使用e2e測試 填NO
? Should we run `npm install` for you after the project has been cre
ated? (recommended) npm //是否需要現(xiàn)在通過npm或yarn幫你配置項目，或是稍后你自己動手安裝
安裝完成后出現(xiàn)運行項目的相關提示：
1.0、使用CLI創(chuàng)建項目(vue create)
To create a new project, run:
vue create hello-world
系統(tǒng)將提示您選擇一個預設。您可以選擇帶有基本 Babel + ESLint 設置的默認預設，或者選擇“手動選擇功能”來選擇您需要的功能。
選擇vue3即可
二、Vue2和Vue3項目結構對比及框架注釋
2.0、Vue3項目結構
![]()
Vue3項目結構.png
Vue3界面是不是感覺簡潔明了，沒有Vue2的冗余。
2.1、Vue項目基礎框架介紹
1、build：目錄是一些webpack的文件，包括運行開發(fā)環(huán)境，項目打包等配置文件。(Vue3之后就看不到了)
2、config：是vue項目的基本配置文件，webpack和node基礎，開發(fā)、線上環(huán)境的配置。
3、dist：是webpack打包后生成的靜態(tài)文件目錄。
4、node_modules：是項目依賴的JS包。
node_modules文件夾下才是npm實際安裝的確定版本的東西，這里面的文件夾結構我們可以稱之為物理樹（physical tree）
5、favicon.ico：圖標文件
6、index.html: 主頁 (Vue3->public目錄下)
7、src：項目目錄，源碼文件夾，基本上文件都放在這里。
8、assets： 資源文件夾，里面放一些靜態(tài)資源(圖片)。
9、components目錄：項目開發(fā)的Vue組件
10、App.vue: 。
11、main.js: 。
12、.gitignore: 用來過濾一些版本控制的文件，比如node_modules文件夾 。
13、babel.config.js：Babel是一個JS編譯器，主要作用是將ECMAScript2015+版本的代碼，轉(zhuǎn)換為向后兼容JS語法，以便能夠運行在當前和舊版本的瀏覽器中或其他環(huán)境中。Vue3.0項目中目錄中存在babel.config.js文件，即為Babel的配置文件，作用于整個項目。
14、package-lock.json：記錄了node_modules目錄下所有模塊的具體來源和版本號以及其他的信息。
package-lock.json可以理解成結合了邏輯樹和物理樹的一個快照(snapshot)，里面有明確的各依賴版本號，實際安裝的結構，也有邏輯樹的結構。
15、package.json：項目文件，記錄當前項目所依賴模塊的版本信息。
package.json里面定義的是版本范圍（比如^1.0.0），具體跑npm install的時候安的什么版本，要解析后才能決定，這里面定義的依賴關系樹，可以稱之為邏輯樹(logical tree)。
16、README.md :描述文件。
三、Vue3 Router使用記錄
用 Vue.js + Vue Router 創(chuàng)建單頁應用，感覺很自然：使用 Vue.js ，我們已經(jīng)可以通過組合組件來組成應用程序，當你要把 Vue Router 添加進來，我們需要做的是，將組件 (components) 映射到路由 (routes)，然后告訴 Vue Router 在哪里渲染它們。
