新建過程
- 必須先安裝node.js ,我因?yàn)槭怯胑lectron-vue打包
- npm install -g @vue/cli
- vue create <新建項(xiàng)目名稱>
-
按照以下圖片勾選配置,選擇初始化方法
1658132104088.png
- Default ([Vue 3] babel, eslint)：默認(rèn)預(yù)設(shè)配置，會(huì)快速創(chuàng)建一個(gè)[Vue3.0]
- Default ([Vue 2] babel, eslint)：默認(rèn)預(yù)設(shè)配置，會(huì)快速創(chuàng)建一個(gè)Vue2.0項(xiàng)目，提供了babel和eslint支持
- Manually select features：手動(dòng)配置項(xiàng)目，可根據(jù)項(xiàng)目的需要選擇合適的選項(xiàng)，具備更多的選擇性
-
選擇插件配置
1658133305098.png
- Babel：使用Babel將源碼進(jìn)行轉(zhuǎn)碼（把ES6=>ES5）
- TypeScript：使用TypeScript進(jìn)行源碼編寫。使用TypeScript可以編寫強(qiáng)類型JavaScript
- Progressive Web App (PWA) Support：使用漸進(jìn)式Web應(yīng)用程序
- Router：使用Vue路由
- Vuex：使用Vuex狀態(tài)管理器
- CSS Pre-processors：CSS 預(yù)處理器（如：less、sass）
- Linter / Formatter：使用代碼風(fēng)格檢查和格式化（如：ESlint）
- Unit Testing：使用單元測(cè)試（unit tests）
- E2E Testing：使用E2E（end to end）黑盒測(cè)試
-
選擇項(xiàng)目版本
1658133459212.png - 是否使用history路由模式（默認(rèn)是hash模式，http://www.abc.com/#/hello，hash的值為#/hello,改變hash值頁(yè)面不會(huì)重新加載,history模式會(huì)采用瀏覽器的歷史記錄棧,在當(dāng)前已有的 back、forward、go 的基礎(chǔ)之上，它們提供了對(duì)歷史記錄進(jìn)行修改的功能。只是當(dāng)它們執(zhí)行修改時(shí)，雖然改變了當(dāng)前的 URL，但瀏覽器不會(huì)立即向后端發(fā)送請(qǐng)求,history模式前后臺(tái)都要配置）
1658133554507.png -
選擇預(yù)處理器
1658134032266.png -
選擇代碼格式化檢測(cè)工具 這里我用的是eslint+preitter
1658134088137.png
- ESLint with error prevention only：ESLint只會(huì)進(jìn)行錯(cuò)誤提醒
- ESLint + Airbnb config：ESLint Airbnb標(biāo)準(zhǔn)
- ESLint + Standard config：ESLint Standard標(biāo)準(zhǔn)
- ESLint + Prettier：代碼質(zhì)量檢測(cè)+代碼格式化工具
-
選擇文件配置方式 一般單獨(dú)生成配置文件
1658134223663.png -
是否包成vue生成模板，方便后期快速搭建項(xiàng)目
image.png
vue3.0跟vue2.0的變化
全局掛在屬性的變化 vue2.0
vue.prototype.$axios
全局掛在屬性的變化 vue3.0
Vue.config.globalProperties
引用vue全局對(duì)象的變化vue2.0
import Vue from 'vue';
Vue.use(globalCoilInfo);
引用vue全局對(duì)象的變化vue3.0
import { createApp } from 'vue'
const app = createApp({})
