vs code创建vue模板

一字字敲vue模板是非常低效得事情,所以我搜索了如何在vs中创建vue模板方法,过程很简单。

  1. 使用Ctrl + Shift + P召唤出控制台,然后输入snippets并选择。
  2. 接着输入vue,vs code自动生成vue.json文件。
  3. 将文件改为下面得模板(请根据个人需求修改当中的内容)
{
	// Example:
	"Print to console": {
		"prefix": "vue",
		"body": [
			"<template>",
			"  <div class=\"wrapper\">$0</div>",
			"</template>",
			"",
			"<script>",
			"export default {",
			"  components: {},",
			"  props: {},",
			"  data() {",
			"    return {",
			"    };",
			"  },",
			"  watch: {},",
			"  computed: {},",
			"  methods: {},",
			"  created() {},",
			"  mounted() {}",
			"};",
			"</script>",
			"<style lang=\"scss\" scoped>",
			".wrapper{}",
			"</style>"    
		],
		"description": "A vue file template"
	}
}

更新:修改了格式,使其符合eslint标准
最后在你的vue文件中输入vue就可以生成模板,是不是很神奇?

### 使用 VS Code 创建 Vue 项目 为了在 Visual Studio Code (VS Code) 中创建一个新的 Vue.js 项目,可以遵循以下方法: #### 安装 Node.js 和 npm 确保本地环境已经安装了Node.js以及npm(Node包管理器),因为Vue CLI工具依赖于它们来运行。可以通过命令`node -v`和`npm -v`验证是否已成功安装[^1]。 #### 安装 Vue CLI 打开终端并执行如下命令以全局方式安装 Vue CLI: ```bash npm install -g @vue/cli ``` 这一步骤允许通过命令行界面轻松地初始化新的 Vue 应用程序。 #### 初始化新项目 进入希望放置项目的文件夹路径下,在命令提示符中输入下列指令启动交互式的项目配置向导: ```bash vue create my-project-name ``` 在此过程中会被询问关于功能插件的选择,其中包括是否安装 `vue-router` 。由于提到项目肯定会使用到路由功能,则应当选择 'Manually select features' 并确认加入 `vue-router` 支持。 完成上述设置之后,CLI将会自动下载必要的依赖项并将模板代码复制到指定目录内。 #### 启动开发服务器 当构建过程结束后,切换至刚刚建立好的项目根目录,并利用下面这条语句开启本地Web服务以便预览效果: ```bash cd my-project-name npm run serve ``` 此时浏览器会默认访问 http://localhost:8080 地址查看正在运行的应用实例。 #### 在 VS Code 中打开项目 最后,建议将新建的Vue工程导入Visual Studio Code编辑器里继续后续编码工作。可以直接从资源管理器拖拽整个文件夹进去或是借助快捷键Ctrl+Shift+P调出命令面板后选取“File: Open Folder...”。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值