国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

almost最好的Vue + Typescript系列01 環(huán)境搭建篇

isLishude / 2065人閱讀

摘要：初來乍到，請(qǐng)多多關(guān)照也許這是第一套基于搭建基于的項(xiàng)目教程。年月初升級(jí)到了新的版本版，跟版本項(xiàng)目結(jié)構(gòu)發(fā)生了很大的改變，目錄結(jié)構(gòu)更簡(jiǎn)潔更科學(xué)。并且可以選配，在此之前配置略麻煩，是的超級(jí)，靜態(tài)類型，便捷的注解，使前端代碼優(yōu)雅。

前言

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

前期準(zhǔn)備

不用怕,下面開始一步步教你構(gòu)建一個(gè)vue項(xiàng)目:

我大概總結(jié)了構(gòu)建項(xiàng)目的幾個(gè)步驟:

vue-cli 腳手架生成項(xiàng)目結(jié)構(gòu) (此篇文章主要介紹第一步)

封裝網(wǎng)絡(luò)請(qǐng)求接口,還可以再根據(jù)業(yè)務(wù)進(jìn)行一些封裝

網(wǎng)絡(luò)請(qǐng)求異常處理的封裝

根據(jù)個(gè)人喜好配置一些插件,如tslint

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

開始動(dòng)手 
利用最新版的腳手架vue-cli構(gòu)建初始項(xiàng)目
參考github: vue-cli
1.安裝最新的腳手架包 
npm install -g @vue/cli

檢測(cè)是否安裝成功： 
vue -V 或 vue --version
2.初始化項(xiàng)目(注意不是init,而且create) 
vue create vue-project(取你要的項(xiàng)目名字，不支持駝峰)
3.自定義項(xiàng)目需求:

默認(rèn)設(shè)置（直接enter）會(huì)快速創(chuàng)建一個(gè)新項(xiàng)目的原型，沒有帶任何輔助功能的npm包

手動(dòng)配置（按方向鍵 ↓）是我們所需要的面向生產(chǎn)的項(xiàng)目，提供可選功能的npm包

這時(shí)候出現(xiàn)了一些配置項(xiàng),選擇適合本次項(xiàng)目的配置: (按空格確認(rèn)選擇,down往下移動(dòng),不要按錯(cuò)啦)

按下回車鍵,進(jìn)入下一個(gè)配置:

sass or less,個(gè)人偏向于sass,所以這里選擇了sass:

語法檢查：

何時(shí)進(jìn)行語法檢查：

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

下一步出現(xiàn)了In dedicated config files or In package.json

建議選擇分In dedicated config files(專門的配置文件),會(huì)自動(dòng)生成一個(gè)vue.config.js的文件,因?yàn)樾碌哪_手架沒有特殊的webpack.config.json,為了使結(jié)構(gòu)更清晰,我們多帶帶將配置放在一個(gè)文件夾下面,不跟package.json揉在一起

繼續(xù)向下選擇
是否保存本次配置，可以方便之后直接使用，這次就不保存了哦~

保存成功后,開始安裝啦~~ 過程有點(diǎn)慢
安裝成功后,提示:

此時(shí)項(xiàng)目大概結(jié)構(gòu)已經(jīng)有了,選擇我們熟悉的編輯器打開(這里推薦使用vscode,對(duì)ts語法支持很好哦)

大致目錄結(jié)構(gòu):

我們現(xiàn)在運(yùn)行起來試試:

cd vue-project
cnpm i
npm run serve
注意啟動(dòng)命令: npm run serve, 在package.json可查看相應(yīng)的啟動(dòng)命令

啟動(dòng)成功:

好啦~ 腳手架運(yùn)行起來以后,下面我們?cè)摳鶕?jù)自己需要的需要配置自己的項(xiàng)目了

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

新建文件 tslint.json , 根據(jù)自己的喜好配置啦,附上我的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環(huán)境搭建篇,下一篇簡(jiǎn)單介紹一下vue項(xiàng)目結(jié)構(gòu)詳解

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/93384.html

相關(guān)文章

  • almost最好的Vue + Typescript系列02 項(xiàng)目結(jié)構(gòu)篇

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

    BicycleWarrior 評(píng)論0 收藏0

  • almost最好的Vue + Typescript系列02 項(xiàng)目結(jié)構(gòu)篇

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

    DTeam 評(píng)論0 收藏0

  • almost最好的Vue + Typescript系列02 項(xiàng)目結(jié)構(gòu)篇

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

    Clect 評(píng)論0 收藏0

  • 基于vue + element ui的table編輯,保存和刪除

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

    frontoldman 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<