欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

在vscode 中設(shè)置 vue模板內(nèi)容的方法

 更新時(shí)間:2020年09月02日 09:40:18   作者:可愛組長(zhǎng)  
這篇文章主要介紹了在vscode 中設(shè)置 vue模板內(nèi)容的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

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)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue登錄注冊(cè)及token驗(yàn)證實(shí)現(xià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的分頁器效果

    利用Vue模擬實(shí)現(xiàn)element-ui的分頁器效果

    這篇文章主要為大家詳細(xì)介紹了如何利用Vue模擬實(shí)現(xiàn)element-ui的分頁器效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以動(dòng)手嘗試一下
    2022-11-11
  • 前端Vue全屏screenfull通用解決方案及原理詳細(xì)分析

    前端Vue全屏screenfull通用解決方案及原理詳細(xì)分析

    這篇文章主要給大家介紹了關(guān)于前端Vue全屏screenfull通用解決方案及原理的相關(guān)資料,使用screenfull這一第三方庫可以實(shí)現(xiàn)更穩(wěn)定的全屏功能,需要的朋友可以參考下
    2024-10-10
  • 在Vue3項(xiàng)目中關(guān)閉ESLint的完整步驟

    在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-11
  • Vue中Router路由兩種模式hash與history詳解

    Vue中Router路由兩種模式hash與history詳解

    這篇文章主要介紹了Vue中Router路由的兩種模式,分別對(duì)hash模式與history模式作了簡(jiǎn)要分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助
    2021-09-09
  • 詳解基于iview-ui的導(dǎo)航欄路徑(面包屑)配置

    詳解基于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.警告的問題

    這篇文章主要介紹了解決vue項(xiàng)目運(yùn)行提示W(wǎng)arnings while compiling.警告的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09
  • 解決Vue 刷新頁面導(dǎo)航顯示高亮位置不對(duì)問題

    解決Vue 刷新頁面導(dǎo)航顯示高亮位置不對(duì)問題

    這篇文章主要介紹了解決Vue 刷新頁面導(dǎo)航顯示高亮位置不對(duì)問題,本文圖文實(shí)例相結(jié)合給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-12-12
  • Echart圖表在項(xiàng)目中的前后端使用詳解

    Echart圖表在項(xiàng)目中的前后端使用詳解

    圖表在我們的項(xiàng)目中可以幫我們很明確的看到我們想要看到的數(shù)據(jù),本文將主要介紹Echart圖表在項(xiàng)目中前后端使用的詳細(xì)教程,感興趣的同學(xué)可以學(xué)習(xí)一下
    2021-11-11
  • Vue項(xiàng)目?jī)?yōu)化打包之前端必備加分項(xiàng)

    Vue項(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

最新評(píng)論