almost最好的Vue + Typescript系列01 環境搭建篇

前言

hello~ 你們好。 初來乍到，請多多關照 ?(๑•̀ㅂ•́)و✧
也許這是第一套基於 vue-cli 3.x 搭建基於 typescript 的vue項目教程。
2018年3月初,vue-cli 升級到了新的版本3.x版，跟vue-cli 2.x版本項目結構發生了很大的改變，目錄結構更簡潔更科學。
而且能夠選配 TypeScript，在此以前配置 TypeScript 略麻煩，typescript 是 JavaScript的超級，靜態類型，便捷的註解，使前端代碼優雅。

前期準備

不用怕,下面開始一步步教你構建一個vue項目:

我大概總結了構建項目的幾個步驟:

1. vue-cli 腳手架生成項目結構 (此篇文章主要介紹第一步)
2. 封裝網絡請求接口,還能夠再根據業務進行一些封裝
3. 網絡請求異常處理的封裝
4. 根據我的喜愛配置一些插件,如tslint

環境依賴: Node.js ; （最新的腳手架須要Node >=8.9)
vue官方腳手架: vue-cli

開始動手

利用最新版的腳手架vue-cli構建初始項目
參考github: vue-cli

1.安裝最新的腳手架包

npm install -g @vue/cli

檢測是否安裝成功： 
vue -V 或 vue --version

2.初始化項目(注意不是init,並且create)

vue create vue-project(取你要的項目名字，不支持駝峯)

3.自定義項目需求:

默認設置（直接enter）會快速建立一個新項目的原型，沒有帶任何輔助功能的npm包

手動配置（按方向鍵 ↓）是咱們所須要的面向生產的項目，提供可選功能的npm包

這時候出現了一些配置項,選擇適合本次項目的配置: (按空格確認選擇,down往下移動,不要按錯啦)

按下回車鍵,進入下一個配置:

sass or less,我的偏向於sass,因此這裏選擇了sass:

語法檢查：

什麼時候進行語法檢查：

lint on save：保存檢查
lint and fix on commit： fix和commit檢查

下一步出現了In dedicated config files or In package.json

建議選擇分In dedicated config files(專門的配置文件),會自動生成一個vue.config.js的文件,由於新的腳手架沒有特殊的webpack.config.json,爲了使結構更清晰,咱們單獨將配置放在一個文件夾下面,不跟package.json揉在一塊兒

繼續向下選擇
是否保存本次配置，能夠方便以後直接使用，此次就不保存了哦~

保存成功後,開始安裝啦~~ 過程有點慢
安裝成功後,提示:

---

此時項目大概結構已經有了,選擇咱們熟悉的編輯器打開(這裏推薦使用vscode,對ts語法支持很好哦)

大體目錄結構:

咱們如今運行起來試試:

cd vue-project
cnpm i
npm run serve

注意啓動命令: npm run serve, 在package.json可查看相應的啓動命令

啓動成功:

好啦~ 腳手架運行起來之後,下面咱們該根據本身須要的須要配置本身的項目了

安裝 tslint

npm install --save-dev tslint-eslint-rules

新建文件 tslint.json , 根據本身的喜愛配置啦,附上個人tslint.json文件

{
  "defaultSeverity": "warning",
  "extends": [
    "tslint:recommended"
  ],
  "rules": {
    "quotemark": [true, "single"],
    "indent": [true, "spaces", 2],
    "interface-name": false,
    "ordered-imports": false,
    "object-literal-sort-keys": false,
    "no-trailing-whitespace": false,
    "no-consecutive-blank-lines": false,
    "semicolon": [true, "never"],
    "trailing-comma": [true, {"multiline": "never", "singleline": "never"}]
  }
}

題外話

第一篇主要介紹了下基於vue-cli 3.x + typescript環境搭建篇,下一篇簡單介紹一下 vue項目結構詳解