vs code 添加代码片段 （vue 和 vuex）

最新推荐文章于 2024-08-04 16:33:59 发布
最新推荐文章于 2024-08-04 16:33:59 发布
阅读量720 收藏
点赞数
分类专栏： 前端 vue 文章标签： vue js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46030044/article/details/105255904
版权
前端 同时被 2 个专栏收录
31 篇文章 0 订阅
订阅专栏
vue
8 篇文章 0 订阅
订阅专栏

Vue代码片段一

一、进入vscode
方法一：
1、ctrl + shift + p
2、 snip
3、选择Preferences:Configure User Snippets（首选项：配置用户代码段）
在这里插入图片描述
方法二：
在这里插入图片描述
二、首次设置输入html回车
在这里插入图片描述
三、代码片段

{
	"vue": {
		"prefix": "vue",
		"body": [
			"<!DOCTYPE html>",
			"<html lang=\"en\">",
			"\t<head>",
			"\t\t<title></title>",
			"\t\t<meta charset=\"UTF-8\">",
			"\t</head>",
			"\t<body>",
			"\t\t<div id=\"app\">",
			"\t\t</div>",
			"\t\t<script src=\"https://cdn.jsdelivr.net/npm/vue/dist/vue.js\"></script>",
			"\t\t<script>",
			"\t\t\tlet vm = new Vue({",
			"\t\t\t\tel: '#app',",
			"\t\t\t\tdata: {",
			"",
			"\t\t\t\t}",
			"\t\t\t})",
			"\t\t</script>",
			"\t</body>",
			"</html>"
		],
		"description": "vue - Defines a template for a vue & html5 document"
	}

四、测试
建立测试文件（text.html）输入vue
在这里插入图片描述
效果图在这里插入图片描述

Vue代码片段二

一、操作
1、ctrl + shift + p
2、 snip
3、选择Preferences:Configure User Snippets（首选项：配置用户代码段）
4、首次新建代码片段命名vue.json
在这里插入图片描述
二、代码片段

{
	"vuecon": {
		"prefix": "vuecon",
		"body": [
		"<template>",
		"<div class=\"名字\">",
		 "</div>",
		 "</template>",
		 "",
		"<script>",
		"export default {",
		"",
		"}",
		 "</script>",
		"<style lang='scss' scoped>",
		"",
		"</style>",	            
		 ""
	],
	"description": "vue - Define a template for a vue & html5 document"
}

三、测试
建立测试文件text.html 输入vuecon回车
在这里插入图片描述
效果图
在这里插入图片描述

做你的猫miao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
umi首屏加载速度优化
weixin_46030044的博客
06-21 3015
以上内容来源于转载 作者：pro-xiaoy 链接：https://juejin.cn/post/6964352706832302117 来源：稀土掘金 umi应用首屏加载速度提高3倍+（通用的首屏优化方法） 根据以往的博客,目前我就司的公司前端框架umi, ali出品以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展的前端应用框架。 问题所在 一直以来我们网站的首页加载速度很慢,虽然使用了umi但是我们没有使用ssr依旧使用的是spa.首屏加载速度在6s左右, 当我们
react 使用screenfull插件 实现全屏特效
weixin_46030044的博客
04-30 2725
一、安装 yarn add screenfull 二、导入 import screenfull from 'screenfull' 三、定义方法 fullScreen = () => { screenfull.toggle()} 四、调用 <ButtononClick = {this.fullScreen}>全屏</Button> ...
VS code上创建Vue项目详细化教程1-配置VScode与Vue
Charles_Clark的博客
06-06 2701
VS code上创建Vue项目详细化教程1-配置VScode与Vue
React模拟后台项目（一）入口文件配置
weixin_46030044的博客
08-02 1474
一、入口index文件 src/index.js // 导入库 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; import {Provider} from 'react-redux'; import { ConfigProvider } f
VUE main.js、App.vue和assets/css/reset.scss配置
weixin_46030044的博客
06-16 1318
一、目录main.js import Vue from 'vue' import App from './App.vue' import router from './router' // import store from './store' // 配置ElementUI import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); // 配置全局默认样式 imp
微信小程序 异步请求封装 包含wx.showLoading懒加载和wx.showToast提示
weixin_46030044的博客
05-14 1304
一、目录结构 utils/require.js 二、内容 // JSDoc手册： https://www.html.cn/doc/jsdoc/tags-author.html // 接口地址 const baseUrl = 'http://XXX.XXX.XXX' /** * 封装数据请求的方法 * @see {@link https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html} *
React模拟后台项目（七）Login页面文件配置
weixin_46030044的博客
08-02 1128
一、登录 src/page/login/index.js // 导入库 // 导入React import React, { Component } from 'react' import {connect} from 'react-redux' import {Redirect} from 'react-router-dom' import { loginAction } from './store/actionCreators' // 导入样式 // 导入styled import {
React模拟后台项目（三）修改全局样式文件配置
weixin_46030044的博客
08-02 874
一、统一全局样式文件 src/static/reset.js import {createGlobalStyle} from 'styled-components'; export const GlobalStyle = createGlobalStyle` html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, b
React项目框架初始化操作（建框架，UI，样式，路由）及错误lessOptions?, prependData?, appendData?, sourceMap?解决
weixin_46030044的博客
04-30 795
一、创建框架 CRA 命令： npx create-react-app item 注释： npx不可用的可使用cnpm创建 二、安装基本插件 yarn add react redux react-redux redux-devtools-extension immutable react-immutable react-router-dom 三、选择UI框架（此处以Antd UI 为例） 框架...
React和VUE项目推荐目录结构
weixin_46030044的博客
04-30 693
一、React项目推荐目录结构 src目录 api 接口目录 components 公共组件（或common） pages 组件目录 orders 订单目录 components（相关组件） store （仓库） index.js (默认组件) style.js （默认样式 import styled from 'styled-compon...
React模拟后台项目（五）接口文件配置（ajax）
weixin_46030044的博客
08-02 659
一、请求封装 src/api/request.js import axios from 'axios' // 判断当前的运行环境 // isDev 为真 开发环境 --- npm run serve // isDev 为假 非开发环境（测试环境，生产环境）- npm run build const isDev = process.env.NODE_ENV === 'development' const request = axios.create({ // 根据环境 设置不同的baseURL // ba
vue开发工具安装、测试及安装过程的问题（vue开发工具测试面板为空，"windows 找不到文件chrome）
weixin_46030044的博客
03-30 568
一、下载vue开发工具 下载地址：https://173app.com/chrome-ext 二、跳转至扩展程序 三、开启开发者模式 四、将下载的vue开发工具拖拽至扩展程序中 五、测试 编写vue测试项目后 F12 六、过程可能存在问题 问题1：下载的vue插件拖入扩展程序后，F12测试面板为空 解决方案： （1）更新高版本Chrome （2）找到C盘下的manifest.json...
React模拟后台项目（四）路由文件配置
weixin_46030044的博客
08-02 525
一、路由封装 src/router/privateRoute.js // 导入react全家桶 import React from 'react' import { Route, Redirect } from 'react-router-dom' // 手册：https://reacttraining.com/react-router/web/example/auth-workflow // 自定义私有路由高阶组件 const PrivateRoute = ({component: Compone
React模拟后台项目（二）公共Store文件配置
weixin_46030044的博客
08-02 417
一、导出公共仓库 src/store/index.js // 导入模块 import thunk from 'redux-thunk' import { createStore, applyMiddleware } from 'redux' import { composeWithDevTools } from 'redux-devtools-extension' // 导入reducer import reducers from './reducers' // 创建仓库 const store = c
前端异步请求封装 api
weixin_46030044的博客
06-10 398
一、目录request.js import axios from 'axios' // 判断当前的运行环境 // isDev 为真 开发环境 --- npm run serve // isDev 为假 非开发环境（测试环境，生产环境）- npm run build const isDev = process.env.NODE_ENV === 'development' const request = axios.create({ // 根据环境 设置不同的baseURL // baseURL: 'htt
牛客JS题（二十一）数组扁平化
最新发布
不起眼小菜菜的博客
08-04 623
注释很详细，直接上代码……
Vue3中的pinia的使用及组合写法与普通写法的区别
m0_62626838的博客
07-30 263
1、首先pinia可以自己后面按需安装，也可在项目创建时去勾选安装（这里我使用的是项目创建时自动安装的，吃了点亏，忘记这里是组合写法了）按照这个写法是不需要添加pinia核心（state、actions、getters），但需要return！store文件夹中的counter.ts （名字任起）在组件中直接使用即可，如下图。2、自定义安装pinia。3、在组件中使用，如下图。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 960
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
vue2vuex和vue3vuex区别
09-16
Vue2和Vue3在使用Vuex上有一些区别。 1. 语法：Vue2使用较为传统的选项API来使用Vuex，而Vue3推荐使用更现代的组合式API。Vue3中可以使用`useStore`函数来获取vuex实例，而不再需要使用`$store`属性。 2. 模块化：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值