vscode创建第一个vue项目

最新推荐文章于 2025-10-26 18:00:00 发布

原创最新推荐文章于 2025-10-26 18:00:00 发布 · 660 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue项目专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍如何使用vscode和node.js搭建Vue项目环境，包括安装必要工具如vue-cli和webpack，以及如何通过控制台创建并配置Vue项目模板。

总结

首先要装好vscode和node.js
打开终端执行npm install -g vue-cli
安装webpack ：npm install -g webpack
找到项目目录:vue init webpack vue_test
启动项目:npm run dev
打包:npm run build

标题创建vue模板

1，使用快捷键Ctrl+Shift+p 打开控制台，输入snippets。
2，输入vue，出现vue.json设置模板

    "Print to console":{
    "prefix": "vue",
        "body": [
            "<template>",
            "  <div class=\"app-container\">$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"
}

3，创建文件，出入vue就可以选择啦