安裝
npm install @vue/cli -g //最新版本
//安裝指定版本
npm install @vue/cli@3.11.0 -g
卸載
npm uninstall @vue/cli -g
//卸載指定版本
npm uninstall @vue/cli@3.11.0 -g
創(chuàng)建項目格式: vue create 項目名稱
vue create MyProject
安裝配置介紹：
1. 創(chuàng)建項目
vue create MyProject
2. 選擇要項目配置
- 第一個是默認(rèn)的集成了babel 和 eslint
- 第二個是自定義的類型
? Please pick a preset: (Use arrow keys)
? default (babel, eslint)
Manually select features
Manually select features 自定義選項介紹
| 選項 | 描述 | 選擇 |
|---|---|---|
| Choose Vue version | 選擇Vue版本 | Y |
| Babel | vue項目中普遍使用es6語法，但有時我們的項目需要兼容低版本瀏覽器，這時就需要引入babel插件，將es6轉(zhuǎn)成es5 | Y |
| TypeScript | TypeScript通過添加類型來擴(kuò)展JavaScript。通過了解JavaScript熬拒，TypeScript可以節(jié)省您捕獲錯誤的時間并在運(yùn)行代碼之前提供修復(fù)。任何瀏覽器，任何操作系統(tǒng)儿子，任何運(yùn)行JavaScript的地方。 完全開源 | |
| Progressive Web App (PWA) Support | 漸進(jìn)式Web應(yīng)用程序（PWA） | 支持 |
| Router | 路由 | |
| Vuex | Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式砸喻。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)柔逼，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化 | |
| CSS Pre-processors | CSS預(yù)處理器，預(yù)處理器：比如要用sass或者cssNext就要按照人家規(guī)定的語法形式割岛，就是用人家的語法去編寫愉适，然后人家把你編寫的代碼轉(zhuǎn)成css。 | |
| Linter / Formatter | 格式化程序 | Y |
| Unit Testing | 單元測試 | |
| E2E Testing | 端到端（end-to-end） |
我這里選擇的 ：Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter
3. 手動選擇對應(yīng)的配置后癣漆，進(jìn)行下一步選擇vue 版本维咸，因為3.x還是預(yù)覽版，所以選擇2.x 的版本
? 2.x
3.x (Preview)
4. 是否使用類組件語法:
即原本是：home = new Vue()創(chuàng)建vue實例
使用裝飾器后：class home extends Vue{}
Use class-style component syntax? (Y/n)
5. 使用Babel與TypeScript一起用于自動檢測的填充?
Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)
6. 路由使用歷史模式? 這種模式充分利用 history.pushState API 來完成 URL 跳轉(zhuǎn)而無須重新加載頁面
Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
7. 使用什么css預(yù)編譯器惠爽？ 我選擇的 Less
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less //vue 一般搭配此項
Stylus
8. 選擇一個代碼檢測的配置：TSLint只有在選擇TypeScript時才會存在癌蓖。
Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only // 只進(jìn)行報錯提醒
ESLint + Airbnb config // 不嚴(yán)謹(jǐn)模式
ESLint + Standard config // 正常模式
ESLint + Prettier // 嚴(yán)格模式
TSLint // TypeScript格式驗證工具
9. 語法檢測方式。一般是保存就檢測
Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
?? Lint on save //保存就檢測
? Lint and fix on commit //提交時檢測
10. 選擇如何保存配置婚肆。這里我們一般選擇單獨生成配置文件租副。
Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
? In dedicated config files //#獨立的文件放置
In package.json //#放到package.json中
11. 是否保存本次設(shè)置的配置。我選擇的n
Save this as a preset for future projects? (y/N)
項目目錄結(jié)構(gòu)介紹
image.png
- node_modules:第三方依賴
- public:公共資源
- src:源碼
- assets：靜態(tài)資源旬痹，css附井、img、js两残、font等
- compoments：組件永毅，一般自定義組件
- router：路由配置
- views：視圖組件
- App.vue：首頁組件（默認(rèn)組件）
- main.js：入口文件
- .browserslistrc：配置使用CSS兼容性插件的使用范圍
- .eslintrc.js：配置ESLint
- .gitignore：配置git忽略的文件或者文件夾
- babel.config.js：使用一些預(yù)設(shè)
- package.json：項目描述既依賴
- package-lock.json：版本管理使用的文件
- README.md：項目描述
修改配置方式。
最常用的是第三種人弓。新建文件vue.config.js
- vue ui 命令
- node_moudles/@vue/cli-service/webpack.config.js 相關(guān)依賴
- 新建vue.config.js
