使用vue-cli3+typescript的項(xiàng)目模板創(chuàng)建工程的教程
版本問(wèn)題
全局安裝過(guò)舊版本的 vue-cli(1.x 或 2.x)要先卸載它 (vue -V 查看自己的腳手架版本)
npm uninstall vue-cli -g //或者 yarn global remove vue-cli
注:Vue CLI 3需要 nodeJs ≥ 8.9
安裝
cnpm install -g @vue/cli
創(chuàng)建項(xiàng)目(以下只說(shuō)明用vue ui圖形化界面導(dǎo)入配置好的demo)
vue ui 打開(kāi)腳手架的圖形化界面,進(jìn)到到demo目錄,導(dǎo)入(提示沒(méi)有依賴(lài),選擇仍然導(dǎo)入即可)
安裝依賴(lài)
運(yùn)行項(xiàng)目
也可以在對(duì)應(yīng)的文件夾下的cmd 輸入 npm run serve
項(xiàng)目部分說(shuō)明
文件目錄說(shuō)明
rem適配問(wèn)題,關(guān)系:1rem=100px,屏幕<1000px,不再縮小處理
vscode ts的配置(文件->首選項(xiàng)->設(shè)置)
{
"window.zoomLevel": 0,
"workbench.colorTheme": "One Monokai",
"editor.fontSize": 18,
"search.followSymlinks": false,
"emmet.includeLanguages": {
"wxml": "html"
},
"vetur.validation.template": false,
"minapp-vscode.disableAutoConfig": true,
"prettier.tabWidth": 4,
"vetur.format.defaultFormatter.html": "prettier",
"editor.codeActionsOnSave": {
"source.fixAll.tslint": true
},
// 每次保存的時(shí)候使用tslint格式化
"tslint.autoFixOnSave": true,
// vscode默認(rèn)啟用了根據(jù)文件類(lèi)型自動(dòng)設(shè)置tabsize的選項(xiàng)
"editor.detectIndentation": false,
// 重新設(shè)定tabsize
"editor.tabSize": 2,
// #每次保存的時(shí)候自動(dòng)格式化
"editor.formatOnSave": true,
"prettier.tslintIntegration": true,
// #去掉代碼結(jié)尾的分號(hào)
"prettier.semi": false,
// #使用帶引號(hào)替代雙引號(hào)
"prettier.singleQuote": true,
// #讓函數(shù)(名)和后面的括號(hào)之間加個(gè)空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": false,
// #這個(gè)按用戶(hù)自身習(xí)慣選擇
// #讓vue中的js按編輯器自帶的ts格式進(jìn)行格式化
"vetur.format.defaultFormatter.ts": "vscode-typescript",
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
// #vue組件中html代碼格式化樣式
}
},
// 存在tslint配置文件時(shí)才啟用
"tslint.validateWithDefaultConfig": true,
"javascript.implicitProjectConfig.experimentalDecorators": true,
"breadcrumbs.enabled": true,
"[typescript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
}
總結(jié)
到此這篇關(guān)于使用vue-cli3+typescript的項(xiàng)目模板創(chuàng)建工程的文章就介紹到這了,更多相關(guān)vue-cli3+typescript 創(chuàng)建工程內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue中如何動(dòng)態(tài)綁定圖片,vue中通過(guò)data返回圖片路徑的方法
下面小編就為大家分享一篇vue中如何動(dòng)態(tài)綁定圖片,vue中通過(guò)data返回圖片路徑的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
web開(kāi)發(fā)中如何優(yōu)雅的解決"重復(fù)請(qǐng)求"問(wèn)題
在我們的日常開(kāi)發(fā)當(dāng)中,很多時(shí)候會(huì)出現(xiàn)短時(shí)間內(nèi)重復(fù)請(qǐng)求的情況,如果沒(méi)有妥當(dāng)?shù)靥幚砗蠊車(chē)?yán)重,這篇文章主要給大家介紹了關(guān)于web開(kāi)發(fā)中如何優(yōu)雅的解決重復(fù)請(qǐng)求問(wèn)題的相關(guān)資料,需要的朋友可以參考下2022-05-05
這篇文章主要為大家詳細(xì)介紹了渲染器的工作原理,以及如何將真實(shí)dom或者組件用虛擬dom的形式進(jìn)行描述并渲染,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
Vue.js設(shè)計(jì)與實(shí)現(xiàn)無(wú)限遞歸學(xué)習(xí)總結(jié)
這篇文章主要為大家介紹了Vue.js設(shè)計(jì)與實(shí)現(xiàn)無(wú)限遞歸學(xué)習(xí)總結(jié)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要為大家介紹了Vue組件的Prop命名約定詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
這篇文章主要介紹了使用Vue.js 和Chart.js制作絢麗多彩的圖表，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下2019-06-06
vue實(shí)現(xiàn)微信二次分享以及自定義分享的示例
這篇文章主要介紹了vue實(shí)現(xiàn)微信二次分享以及自定義分享的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要介紹了vue+express+jwt持久化登錄的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
微信、支付寶支付密碼時(shí)的密碼輸入框大家都很熟悉，本文主要介紹了vue3如何實(shí)現(xiàn)?6位支付密碼輸入框，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
使用el-upload組件實(shí)現(xiàn)遞歸多文件上傳的全過(guò)程
el-upload組件文件上傳都是每個(gè)文件請(qǐng)求一次接口,本次實(shí)現(xiàn)一次請(qǐng)求上傳多個(gè)文件,下面這篇文章主要給大家介紹了關(guān)于使用el-upload組件實(shí)現(xiàn)遞歸多文件上傳的相關(guān)資料,需要的朋友可以參考下2023-03-03