vue-cli 3.0安裝和使用

 

零. 前言

    公司最近開發項目使用的是vue-cli 3.0版本開發，但是對於vue-cli 3.0版本一直沒有研究過如何使用，公司使用配置：pug + ts + stylus + eslint；編輯器使用：vscode，使用起來簡直不要太爽。

默認你已經安裝了nodejs

一.安裝vue-cli 3.0

1.安裝：

npm install -g @vue/cli

• -g： 全局安裝 vue-cli

二.創建項目

1.創建vue-app項目：

vue create vue-app

2.項目配置：

• 默認配置
• 手動配置：babel ts 預編譯 等等… 【選擇這個】

---

以下是我選擇的配置（可以直接按數字鍵1,2,3,4進行選擇）

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

---

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

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

---

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

使用Babel與TypeScript一起用於自動檢測的填充? yes

---

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

路由使用歷史模式? 這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須重新加載頁面

---

使用什么css預編譯器？ 我選擇的 stylus

---

• tslint: typescript格式驗證工具
• eslint w...: 只進行報錯提醒； 【選這個】
• eslint + A...: 不嚴謹模式；
• eslint + S...: 正常模式；
• eslint + P...: 嚴格模式；

---

代碼檢查方式：我選擇保存時檢查

---


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

---

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

---

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

是否在以后的項目中使用以上配置？不

---

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

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

三.使用

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

tips：此配置包含了.vue文件.styl文件typescript的代碼縮進

{
    "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項目是，回去查找.vscode下的settings.json配置並應用。必須禁用插件：eslint

2.使用pug

yarn add pug pug-plain-loader --dev

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

<template lang="pug">
  #app
    #nav
      router-link(to="/") Home
      router-link(to="/about") About
    router-view
  </div>
</template>

四、常見的一些問題

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

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

  "no-console": "off"

參考文獻：

安裝
eslint配置