使用vue-cli3+typescript的項目模板創(chuàng)建工程的教程
版本問題
全局安裝過舊版本的 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)建項目(以下只說明用vue ui圖形化界面導入配置好的demo)
vue ui 打開腳手架的圖形化界面,進到到demo目錄,導入(提示沒有依賴,選擇仍然導入即可)
安裝依賴
運行項目
也可以在對應(yīng)的文件夾下的cmd 輸入 npm run serve
項目部分說明
文件目錄說明
rem適配問題,關(guān)系:1rem=100px,屏幕<1000px,不再縮小處理
vscode ts的配置(文件->首選項->設(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 }, // 每次保存的時候使用tslint格式化 "tslint.autoFixOnSave": true, // vscode默認啟用了根據(jù)文件類型自動設(shè)置tabsize的選項 "editor.detectIndentation": false, // 重新設(shè)定tabsize "editor.tabSize": 2, // #每次保存的時候自動格式化 "editor.formatOnSave": true, "prettier.tslintIntegration": true, // #去掉代碼結(jié)尾的分號 "prettier.semi": false, // #使用帶引號替代雙引號 "prettier.singleQuote": true, // #讓函數(shù)(名)和后面的括號之間加個空格 "javascript.format.insertSpaceBeforeFunctionParenthesis": false, // #這個按用戶自身習慣選擇 // #讓vue中的js按編輯器自帶的ts格式進行格式化 "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配置文件時才啟用 "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的項目模板創(chuàng)建工程的文章就介紹到這了,更多相關(guān)vue-cli3+typescript 創(chuàng)建工程內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue中如何動態(tài)綁定圖片,vue中通過data返回圖片路徑的方法
下面小編就為大家分享一篇vue中如何動態(tài)綁定圖片,vue中通過data返回圖片路徑的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02web開發(fā)中如何優(yōu)雅的解決"重復(fù)請求"問題
在我們的日常開發(fā)當中,很多時候會出現(xiàn)短時間內(nèi)重復(fù)請求的情況,如果沒有妥當?shù)靥幚砗蠊車乐?這篇文章主要給大家介紹了關(guān)于web開發(fā)中如何優(yōu)雅的解決重復(fù)請求問題的相關(guān)資料,需要的朋友可以參考下2022-05-05Vue.js設(shè)計與實現(xiàn)無限遞歸學習總結(jié)
這篇文章主要為大家介紹了Vue.js設(shè)計與實現(xiàn)無限遞歸學習總結(jié),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-05-05使用el-upload組件實現(xiàn)遞歸多文件上傳的全過程
el-upload組件文件上傳都是每個文件請求一次接口,本次實現(xiàn)一次請求上傳多個文件,下面這篇文章主要給大家介紹了關(guān)于使用el-upload組件實現(xiàn)遞歸多文件上傳的相關(guān)資料,需要的朋友可以參考下2023-03-03