在vscode 中設(shè)置 vue模板內(nèi)容的方法
vscode中設(shè)置 vue 模板內(nèi)容緣由設(shè)置要求1:vscode 先下載插件 `vetur`2: 菜單欄 -文件 - 首選項(xiàng) - 用戶代碼片段3:使用
緣由
由于每次在 vscode 中創(chuàng)建vue的文件的時(shí)候,都需要手動(dòng)書寫
templete,模板
script,腳本
style,樣式
這些重復(fù)和繁瑣的事情,是可以定義一個(gè)模板信息的
設(shè)置要求
1:vscode 先下載插件 vetur
2: 菜單欄 -文件 - 首選項(xiàng) - 用戶代碼片段
以下是借鑒一下谷粒商城的 提供 vue 模板信息 和 httpget、httppost請(qǐng)求
{ "生成vue模板": { "prefix": "vue", "body": [ "<template>", "<div></div>", "</template>", "", "<script>", "http://這里可以導(dǎo)入其他文件(比如:組件,工具js,第三方插件js,json文件,圖片文件等等)", "http://例如:import 《組件名稱》 from '《組件路徑》';", "", "export default {", " //import引入的組件需要注入到對(duì)象中才能使用", "components: {},", "props: {},", "data() {", "http://這里存放數(shù)據(jù)", "return {", "", "};", "},", "http://計(jì)算屬性 類似于data概念", "computed: {},", "http://監(jiān)控data中的數(shù)據(jù)變化", "watch: {},", "http://方法集合", "methods: {", "", "},", "http://生命周期 - 創(chuàng)建完成(可以訪問當(dāng)前this實(shí)例)", "created() {", "", "},", "http://生命周期 - 掛載完成(可以訪問DOM元素)", "mounted() {", "", "},", "beforeCreate() {}, //生命周期 - 創(chuàng)建之前", "beforeMount() {}, //生命周期 - 掛載之前", "beforeUpdate() {}, //生命周期 - 更新之前", "updated() {}, //生命周期 - 更新之后", "beforeDestroy() {}, //生命周期 - 銷毀之前", "destroyed() {}, //生命周期 - 銷毀完成", "activated() {}, //如果頁面有keep-alive緩存功能,這個(gè)函數(shù)會(huì)觸發(fā)", "}", "</script>", "<style scoped>", "$4", "</style>" ], "description": "生成vue模板" }, "http-get請(qǐng)求": { "prefix": "httpget", "body": [ "this.\\$http({", "url: this.\\$http.adornUrl(''),", "method: 'get',", "params: this.\\$http.adornParams({})", "}).then(({ data }) => {", "})" ], "description": "httpGET請(qǐng)求" }, "http-post請(qǐng)求": { "prefix": "httppost", "body": [ "this.\\$http({", "url: this.\\$http.adornUrl(''),", "method: 'post',", "data: this.\\$http.adornData(data, false)", "}).then(({ data }) => { });" ], "description": "httpPOST請(qǐng)求" } }
3:使用
在新創(chuàng)建的vue文件中,根據(jù)剛才的文件名就可以快速生成模板中的文件內(nèi)容
比如,此時(shí)就是設(shè)置的 vue
總結(jié)
到此這篇關(guān)于在vscode 中設(shè)置 vue模板內(nèi)容的方法的文章就介紹到這了,更多相關(guān)vscode 設(shè)置 vue模板內(nèi)容內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vscode vue 文件模板的配置方法
- 使用vscode快速建立vue模板過程詳解
- 在VScode中創(chuàng)建你的代碼模板的方法
- Vscode中快速創(chuàng)建自定義代碼模板的方法
- VsCode里的Vue模板的實(shí)現(xiàn)
- vscode自定義vue模板的實(shí)現(xiàn)
- VS2019 自定義項(xiàng)目模板的實(shí)現(xiàn)方法
- vsCode一鍵生成vue模板
- Vscode自定義注釋模板的實(shí)現(xiàn)示例
- VS2022添加代碼模板的實(shí)現(xiàn)步驟(圖文)
- VisualStudio2022制作多項(xiàng)目模板及Vsix插件的實(shí)現(xiàn)
相關(guān)文章
vue登錄注冊(cè)及token驗(yàn)證實(shí)現(xiàn)代碼
在vue單頁中,我們可以通過監(jiān)控route對(duì)象,從中匹配信息去決定是否驗(yàn)證token,然后定義后續(xù)行為。下面通過實(shí)例代碼給大家分享vue登錄注冊(cè)及token驗(yàn)證功能,需要的朋友參考下吧2017-12-12利用Vue模擬實(shí)現(xiàn)element-ui的分頁器效果
這篇文章主要為大家詳細(xì)介紹了如何利用Vue模擬實(shí)現(xiàn)element-ui的分頁器效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以動(dòng)手嘗試一下2022-11-11前端Vue全屏screenfull通用解決方案及原理詳細(xì)分析
這篇文章主要給大家介紹了關(guān)于前端Vue全屏screenfull通用解決方案及原理的相關(guān)資料,使用screenfull這一第三方庫可以實(shí)現(xiàn)更穩(wěn)定的全屏功能,需要的朋友可以參考下2024-10-10在Vue3項(xiàng)目中關(guān)閉ESLint的完整步驟
實(shí)際上在學(xué)習(xí)過程中,你會(huì)發(fā)現(xiàn)eslint檢查特別討厭,這個(gè)時(shí)候我們需要關(guān)閉掉eslint檢查,下面這篇文章主要給大家介紹了關(guān)于在Vue3項(xiàng)目中關(guān)閉ESLint的完整步驟,需要的朋友可以參考下2023-11-11Vue中Router路由兩種模式hash與history詳解
這篇文章主要介紹了Vue中Router路由的兩種模式,分別對(duì)hash模式與history模式作了簡(jiǎn)要分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助2021-09-09詳解基于iview-ui的導(dǎo)航欄路徑(面包屑)配置
這篇文章主要介紹了詳解基于iview-ui的導(dǎo)航欄路徑(面包屑)配置,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02解決vue項(xiàng)目運(yùn)行提示W(wǎng)arnings while compiling.警告的問題
這篇文章主要介紹了解決vue項(xiàng)目運(yùn)行提示W(wǎng)arnings while compiling.警告的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09解決Vue 刷新頁面導(dǎo)航顯示高亮位置不對(duì)問題
這篇文章主要介紹了解決Vue 刷新頁面導(dǎo)航顯示高亮位置不對(duì)問題,本文圖文實(shí)例相結(jié)合給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12Vue項(xiàng)目?jī)?yōu)化打包之前端必備加分項(xiàng)
相信現(xiàn)在很多人都是用Vue做過了各種項(xiàng)目,但是項(xiàng)目代碼做完和上線并不代表這結(jié)束,還有上線以后的優(yōu)化也是很重要的一點(diǎn),這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目?jī)?yōu)化打包的相關(guān)資料,需要的朋友可以參考下2021-09-09