- 找到官网
https://code.visualstudio.com/
,点击download:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ee0ac6d6ad2dbc4a3af41ff333b42247.png)
- 选择user installer的64位的安装包:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/89af3ae2d0db454c353940cc0bd2ef10.png)
- 下载完之后双击安装包,一直next,安装路径自定义,安装之后,打开vscode编辑器,安装vue代码的样式插件:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/04d455c6691db66b3208b2a0cb0f5504.png)
- 然后我们创建一个vue的模板(创建之后,我们新建xxx.vue文件时,输入vue,按enter键就会生成一个vue页面的基本结构),File(文件)—>Preferences(首选项)—>User Snippets(用户代码段):
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/174bf28dee347af3a0a0a1ffa2824e1e.png)
- 会弹出一个搜索框,输入
vue
,选择第一个:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/3d28502797d9f1157a96d9814c65c4ec.png)
- 会是一个vue.json的文件,输入下面的代码,保存:
{
"Print to console": {
"prefix": "vue",
"body": [
"<!-- $1 -->",
"<template>",
"<div class='$2'>$5</div>",
"</template>",
"",
"<script>",
"//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)",
"//例如:import 《组件名称》 from '《组件路径》';",
"",
"export default {",
"//import引入的组件需要注入到对象中才能使用",
"components: {},",
"data() {",
"//这里存放数据",
"return {",
"",
"};",
"},",
"//监听属性 类似于data概念",
"computed: {},",
"//监控data中的数据变化",
"watch: {},",
"//方法集合",
"methods: {",
"",
"},",
"//生命周期 - 创建完成(可以访问当前this实例)",
"created() {",
"",
"},",
"//生命周期 - 挂载完成(可以访问DOM元素)",
"mounted() {",
"",
"},",
"beforeCreate() {}, //生命周期 - 创建之前",
"beforeMount() {}, //生命周期 - 挂载之前",
"beforeUpdate() {}, //生命周期 - 更新之前",
"updated() {}, //生命周期 - 更新之后",
"beforeDestroy() {}, //生命周期 - 销毁之前",
"destroyed() {}, //生命周期 - 销毁完成",
"activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发",
"}",
"</script>",
"<style lang='scss' scoped>",
"//@import url($3); 引入公共css类",
"$4",
"</style>"
],
"description": "Log output to console"
}
}
- 接下来在当前位置open folder(打开一个文件夹),新建一个vue的文件,输入
vue
,回车就看到模板咯:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/bba54ca878f51a2121395499a74d4dcf.png)
- 至此可以导入vue项目,创建vue项目去写代码咯。