?

零. 前言

????公司最近開發(fā)項(xiàng)目使用的是vue-cli 3.0版本開發(fā)，但是對(duì)于vue-cli 3.0版本一直沒(méi)有研究過(guò)如何使用，公司使用配置：pug + ts + stylus + eslint；編輯器使用：vscode，使用起來(lái)簡(jiǎn)直不要太爽。

默認(rèn)你已經(jīng)安裝了nodejs

一.安裝vue-cli 3.0

1.安裝：

npm install -g @vue/cli

• -g： 全局安裝 vue-cli

二.創(chuàng)建項(xiàng)目

1.創(chuàng)建vue-app項(xiàng)目：

vue create vue-app

2.項(xiàng)目配置：

• 默認(rèn)配置
• 手動(dòng)配置：babel ts 預(yù)編譯 等等… 【選擇這個(gè)】

---

以下是我選擇的配置（可以直接按數(shù)字鍵1,2,3,4進(jìn)行選擇）

• Babel：將ES6編譯成ES5
• TypeScript：JS超集，主要是類型檢查
• Router和Vuex，路由和狀態(tài)管理
• Linter/ Formatter：代碼檢查工具
• CSS Pre-processors：css預(yù)編譯 (稍后會(huì)對(duì)這里進(jìn)行配置)
• Unit Testing：單元測(cè)試，開發(fā)過(guò)程中前端對(duì)代碼進(jìn)行自運(yùn)行測(cè)試

---

Use class-style component syntax? (Y/n) y

是否使用Class風(fēng)格裝飾器？
即原本是：home = new Vue()創(chuàng)建vue實(shí)例
使用裝飾器后：class home extends Vue{}

---

Use Babel alongside TypeScript for auto-detected polyfills? (Y/n) y

使用Babel與TypeScript一起用于自動(dòng)檢測(cè)的填充? yes

---

Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y

路由使用歷史模式? 這種模式充分利用 history.pushState API 來(lái)完成 URL 跳轉(zhuǎn)而無(wú)須重新加載頁(yè)面

---

使用什么css預(yù)編譯器？ 我選擇的 stylus

---

• tslint: typescript格式驗(yàn)證工具
• eslint w...: 只進(jìn)行報(bào)錯(cuò)提醒； 【選這個(gè)】
• eslint + A...: 不嚴(yán)謹(jǐn)模式；
• eslint + S...: 正常模式；
• eslint + P...: 嚴(yán)格模式；

---

代碼檢查方式：我選擇保存時(shí)檢查

---


單元測(cè)試工具，這里附上vue單元測(cè)試的鏈接，想了解的小伙伴戳這里 https://vue-test-utils.vuejs.org/zh/

---

vue-cli 一般來(lái)講是將所有的依賴目錄放在package.json文件里

---

Save this as a preset for future projects? (y/N) n

是否在以后的項(xiàng)目中使用以上配置？不

---

下載依賴的工具：使用 yarn，速度快。

到此為止，安裝就完成了，可以等待安裝成功。

三.使用

1.vscode的eslint配置，使代碼能夠在ctrl+s的時(shí)候自動(dòng)格式化：
在vue-app目錄縣新建文件夾.vscode文件，再在.vscode目錄下新建settings.json，文件內(nèi)容如下：

tips：此配置包含了.vue文件.styl文件typescript的代碼縮進(jìn)

{"prettier.printWidth": 160,"prettier.tabWidth": 2,"prettier.semi": false,"prettier.singleQuote": true,"prettier.disableLanguages": [],"editor.tabSize": 2,"[vue]": {"editor.formatOnSave": true},"[typescript]": {"editor.formatOnSave": true,},"[stylus]": {"editor.formatOnSave": true,},"stylusSupremacy.insertColons": false,"stylusSupremacy.insertSemicolons": false,"stylusSupremacy.insertBraces": false,"languageStylus.useSeparator": false, }

• 這樣做：
  表示vscode在讀取到vue-app項(xiàng)目是，回去查找.vscode下的settings.json配置并應(yīng)用。必須禁用插件：eslint

2.使用pug

yarn add pug pug-plain-loader --dev

• 使用yarn安裝 pug 和 pug-plain-loader；（沒(méi)有yarn的自行百度安裝
• --dev：安裝到開發(fā)環(huán)境
• 使用：打開App.vue文件，將文件修改為下面這樣既可。

<template lang="pug">#app#navrouter-link(to="/") Homerouter-link(to="/about") Aboutrouter-view</div> </template>

四、常見的一些問(wèn)題

0.其他一些eslint配置都可以在packge.json文件中的eslintConfig下的rules下配置

1.console.log(1)報(bào)錯(cuò)：
找到packge.json文件中的eslintConfig下的rules：

"no-console": "off"

參考文獻(xiàn)：

安裝
eslint配置

?

轉(zhuǎn)載于:https://www.cnblogs.com/wenwenwei/p/10017843.html

總結(jié)

以上是生活随笔為你收集整理的vue-cli 3.0安装和使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。