一、官方文檔
-
Vue3文檔 - vuejs
https://www.vue3js.cn/docs/zh/
Vue核心功能：數據綁定 -
Vue CLI文檔
https://cli.vuejs.org/zh/guide/
Vue CLI = Vue.js + 一堆組件
二、創建Vue CLI項目
1、安裝Vue CLI
淘寶鏡像
npm get registry --顯示當前的鏡像網址
npm config set registry http://registry.npm.taobao.org -- 使用淘寶的鏡像網址
安裝Vue CLI
npm install -g @vue/cli@4.5.9
2、創建web應用
vue create web
安裝過程如下：
輸入上面命令后，選擇Manually select features
接着選擇對應需要的必選項，*號必選
選擇3.0版本
是不是使用類component,輸入N
Use Babel ...transpiling JSX)? (Y/n),選擇N
地址欄是否使用#,我們選擇Y
代碼校驗風格，我們選僅報錯的即可
什么時候校驗，我們選擇save
Babel, ESLint, etc文件怎么管理，我們選擇第一個單獨
是否將上面的配置保存成一個模板，我們選擇Y
保存的名字可自定義
看到如下圖，證明安裝成功
3、啟動web應用
費命令行啟動。拖動到右側雙擊即可
三、Vue CLI項目結構講解
- index.html, main.ts, app.vue三者關聯
- public和assets兩個靜態資源文件的引用方法
public不參與打包
assets會被打包 - index.html引入外部靜態文件用<%= BASE_URL %>
- 子文件里的.gitignore文件是會生效的，里面配置的文件規則，是相對當前.gitingore文件所在位置
- README.md只有根目錄下的生效
- package.json 作用類似於pom.xml
- eslintrc.js 是一把雙刃劍
- Vue CLI需要編譯才能發布