当前位置: 代码网 > it编程>编程语言>Javascript > Vscode如何创建vue项目

Vscode如何创建vue项目

2025年04月24日 Javascript 我要评论
vscode创建vue项目vscode 和常规的开发软件不同,我们首先需要自己创建一个文件夹,然后在vscode将这个文件夹设定为工作区域文件 =》 将文件夹添加到工作区完成后是这个样子因为我一次性添

vscode创建vue项目

vscode 和常规的开发软件不同,我们首先需要自己创建一个文件夹,然后在vscode将这个文件夹设定为工作区域

文件 =》 将文件夹添加到工作区

完成后是这个样子

因为我一次性添加了2个文件夹

打开后肯定是什么都没有的,然后我们需要打开,vscode 终端

这里创建终端的时候

我们需要选择给哪一个工作空间创建空间,根据你自己的工作空间来

我这里的工作空间文件夹选择的是vue2.0

接下来输入以下命令

初始化vue

npm init -y

修改版本 package.json 里面的 vue 版本号

{
  "name": "vue2.0",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "isc",
  "dependencies": {
    "vue": "^2.6.14"
  }
}

如果不修改,有可能出现没有vue.js 文件的问题

npm install vue

出现如下json和node_modules: html 自己创建哈

来看看html如何引用vue

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>document</title>
</head>
<body>
    <div id="app">
        <h1>{{name}},欢迎你</h1>
    </div>
    
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new vue({
        el:"#app",
        data:{
            name:"小张"
        }
            
    })
</script>
    

</script>


</html>

展示结果

注意:

如果使用npm install vue 下载的文件,没有vue.js 文件,百分之80 就是vue的版本问题

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持代码网。

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com