一、安裝Node

https://nodejs.org/en 點(diǎn)此鏈接下載進(jìn)行安裝，選擇穩(wěn)定版本

image

二、全局安裝 vue-cli3.0

npm install -g @vue/cli 如果之前有安裝需要先卸載掉低版本 npm uninstall vue-cli -g

三、創(chuàng)建項(xiàng)目

1、vue create vue-3.0 執(zhí)行該命令后出現(xiàn)兩個(gè)選項(xiàng)default （babel, eslint）默認(rèn)預(yù)設(shè)配置 和Manually select features（手動(dòng)選擇配置），這里我們選擇手動(dòng)配置

image

然后回車(chē)進(jìn)入配置選擇項(xiàng)

?? Babel

? TypeScript // 支持使用 TypeScript

? Progressive Web App (PWA) Support //支持漸進(jìn)式web應(yīng)用程序

? Router //路由管理器

? Vuex //支持 vuex

? CSS Pre-processors //CSS預(yù)處理

? Linter / Formatter // 代碼風(fēng)格、格式校驗(yàn)

? Unit Testing //單元測(cè)試

? E2E Testing //e2e自動(dòng)化模擬

image

2、是否使用路由的 history 模式

Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) //我們選擇是 Y

3、CSS Pre-processors css預(yù)處理 （我選擇Less）

Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):

Sass/SCSS (with dart-sass)

Sass/SCSS (with node-sass)

? Less

Stylus

4 、Pick a linter / formatter config: 選擇Eslint代碼驗(yàn)證規(guī)則（我們選擇ESLint + Standard config 標(biāo)準(zhǔn)配置）

ESLint with error prevention only

ESLint + Airbnb config

? ESLint + Standard config

ESLint + Prettier

5、 Pick additional lint features: 選擇什么時(shí)候進(jìn)行代碼規(guī)則檢測(cè)（我們選擇保存時(shí)進(jìn)行檢查）

?? Lint on save // 保存時(shí)檢測(cè)

? Lint and fix on commit // fix和commit時(shí)候檢查

6 、Pick a unit testing solution: Unit Testing 單元測(cè)試（我們選擇Jest ）

Mocha + Chai

? Jest

7、Where do you prefer placing config for Babel, ESLint, etc.?(您希望Babel, ESLint 配置的存放位置，我們選擇在專(zhuān)用的配置文件中)

In dedicated config files //在專(zhuān)用的配置文件中

In package.json //在package.json

8、Save this as a preset for future projects?(y/N) （是否保存配置 我們可以選擇Y ，保存后下次構(gòu)建項(xiàng)目的時(shí)候就可以直用這次的配置構(gòu)建項(xiàng)目）

9、構(gòu)建完成

image

10、進(jìn)入vue-3.0，執(zhí)行npm run serve命令運(yùn)行項(xiàng)目訪問(wèn)http://localhost:8080/

image

image

END