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

isLishude 發布于2019-08-22 15:20 / 2057人閱讀

摘要：初來乍到，請多多關照也許這是第一套基于搭建基于的項目教程。年月初升級到了新的版本版，跟版本項目結構發生了很大的改變，目錄結構更簡潔更科學。并且可以選配，在此之前配置略麻煩，是的超級，靜態類型，便捷的注解，使前端代碼優雅。

前言

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

前期準備

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

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

vue-cli 腳手架生成項目結構 (此篇文章主要介紹第一步)

封裝網絡請求接口,還可以再根據業務進行一些封裝

網絡請求異常處理的封裝

根據個人喜好配置一些插件,如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項目結構詳解

云服務器 GPU云服務器云計算系列服務器篇最好的php環境最好的php集成環境 lamp環境的搭建

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93384.html

almost最好的Vue + Typescript系列02 項目結構篇

摘要：源碼文件夾，基本上我們的業務邏輯文件都應該放在這里定義了這個項目所需要的各種模塊，以及項目的配置信息比如名稱版本許可證等元數據。基于vue-cli 3.x,配合typescript的環境構建的新vue項目,跟以前的結構相比,有了一些變化,下面我們來簡單的了解一下基本結構: showImg(https://segmentfault.com/img/bV5xGn?w=360&h=226...

BicycleWarrior 2019-08-30 14:08 評論0 收藏0
almost最好的Vue + Typescript系列02 項目結構篇

摘要：源碼文件夾，基本上我們的業務邏輯文件都應該放在這里定義了這個項目所需要的各種模塊，以及項目的配置信息比如名稱版本許可證等元數據。基于vue-cli 3.x,配合typescript的環境構建的新vue項目,跟以前的結構相比,有了一些變化,下面我們來簡單的了解一下基本結構: showImg(https://segmentfault.com/img/bV5xGn?w=360&h=226...

DTeam 2019-08-22 15:20 評論0 收藏0
almost最好的Vue + Typescript系列02 項目結構篇

摘要：源碼文件夾，基本上我們的業務邏輯文件都應該放在這里定義了這個項目所需要的各種模塊，以及項目的配置信息比如名稱版本許可證等元數據。基于vue-cli 3.x,配合typescript的環境構建的新vue項目,跟以前的結構相比,有了一些變化,下面我們來簡單的了解一下基本結構: showImg(https://segmentfault.com/img/bV5xGn?w=360&h=226...

Clect 2019-08-01 18:41 評論0 收藏0
基于vue + element ui的table編輯,保存和刪除

摘要：在最近年的工作中遇到過幾次很基礎的基于的開發簡單的增刪改查功能閑下來想整理一下以備后用架子用最新的此處可以參考我之前的最好的系列環境搭建篇項目基礎構建好以后這個小我們暫且將數據存在之后我將更新基于前端操作數據庫的操作點擊新增按鈕點擊保存在最近2年的工作中遇到過幾次很基礎的基于element-ui的table開發,簡單的增刪改查功能,閑下來想整理一下~ 以備后用 vue架子,用最新的...

frontoldman 2019-08-22 18:08 評論0 收藏0