安裝
-
通過 vue-cli 創建我們的項目
vue create vue3demo -
通過 vite 創建我們的項目
npm init vite@latest <project-name> --template vue
npm init vite@latest ./ --template vue安裝到當前目錄
or
$ yarn create vite <project-name> --template vue
$ yarn create vite ./ --template vue安裝到當前目錄
or
$ pnpm create vite <project-name> --template vue
$ pnpm create vite ./ -- --template vue安裝到當前目錄
如果 不寫 --template vue 將手動選擇是vue 還是 react 等 是否使用ts 等;
vue-cli選擇如下選項
- 下面是使用 vue-cli 創建項目出現的配置選項
選擇
Manually select features
Use class-style component syntax? (y/N)
是否使用Class風格裝飾器？
即原本是：home = new Vue()創建vue實例
使用裝飾器后：class home extends Vue{}
這個選擇 N，生成組件會和 官方文檔一致;
Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)?
是否使用 Babel 選yes;
Use history mode for router
使用history 路由模式 選yes
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
選擇一個CSS預處理程序 選擇 選第一個 參考 https://juejin.cn/post/6990170277162254372
Sass/SCSS (with dart-sass) // 保存后編譯
Sass/SCSS (with node-sass) // 實時編譯
Less
Stylus
選擇 代碼格式化檢測 因為是用typescript 所以選擇 TSLint
? Pick a linter / formatter config: (Use arrow keys)
>TSLint // typescript格式驗證工具
ESLint with error prevention only // 只進行報錯提醒
ESLint + Airbnb config // 不嚴謹模式
ESLint + Standard config // 正常模式
ESLint + Prettier // 嚴格模式
如果沒有 勾選 ts 選項只有這幾項;
Pick a linter / formatter config:
1.ESLint with error prevention only
只配置使用 ESLint 官網的推薦規則
這些規則在這里添加鏈接描述 https://eslint.bootcss.com/docs/rules/
2.ESLint + Airbnb config
使用 ESLint 官網推薦的規則 + Airbnb 第三方的配置
Airbnb 的規則在這里添加鏈接描述 https://github.com/airbnb/javascript
3.ESLint + Standard config
使用 ESLint 官網推薦的規則 + Standard 第三方的配置
Standard 的規則在這里 添加鏈接描述 https://github.com/standard/standard/blob/master/docs/RULES-zhcn.md
4.ESLint + Prettier
使用 ESLint 官網推薦的規則 + Prettier 第三方的配置
Prettier 主要是做風格統一。代碼格式化工具
Pick additional lint features 選擇在什么時機下觸發代碼格式校驗：
(*) Lint on save 每當保存文件的時候
( ) Lint and fix on commit 每當執行 git commit 提交的時候
Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
Babel、ESLint 等工具會有一些額外的配置文件，這里的意思是問你將這些工具相關的配置文件寫到哪里：
In dedicated config files 分別保存到單獨的配置文件
In package.json 保存到 package.json 文件中
這里建議選擇第 1 個，保存到單獨的配置文件，這樣方便我們做自定義配置。
Save this as a preset for future projects? (y/N)
這里里是問你是否需要將剛才選擇的一系列配置保存起來，然后它可以幫你記住上面的一系列選擇，以便下次直接重用。
這里根據自己需要輸入 y 或者 n，我這里輸入 n 不需要。
如何刪除 之前保存的預設
C:\Users\Light
Vue-CLI會保存在C盤下/用戶/用戶名目錄下自動生成一個名字為.vuerc的預設文件 里面是一個JSON格式的
保存在 presets 字段里面的;直接找到 預設的名字刪除整個代碼
vite 安裝配置
√ Package name: ... z-travelmap （項目名稱）輸入
√ Add TypeScript? ... No / Yes （ts支持）
√ Add JSX Support? ... No / Yes （jsx 語法支持）
√ Add Vue Router for Single Page Application development? ... No / Yes （路由支持）
√ Add Pinia for state management? ... No / Yes （pinia 狀態管理）
√ Add Vitest for Unit Testing? ... No / Yes （集成單頁測試）
√ Add an End-to-End Testing Solution? » No （集成端對端測試）
√ Add ESLint for code quality? ... No / Yes （eslint 集成）
√ Add Prettier for code formatting? ... No / Yes （prettier 集成）