Visual Studio Code中使用Vue插件

一、安装插件

在左侧有个安装插件的按钮,点击后即可通过关键词搜索来安装插件

 

 

二、插件配置

文件 =》首选项=》设置=》用户设置

 

三、推荐插件

vetur

作用:代码提示,高亮

配置:

"emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html"
    }

ESLint

作用:代码错误检查

配置:

 "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "html",
            "autoFix": true // HTML自动修复,
        },
        {
            "language": "vue",
            "autoFix": true // vue 自动修复
        }
    ],
    "eslint.autoFixOnSave": true // 文件保存时自动修复

File Peek

作用:路径跳转

配置:

"file_peek.activeLanguages": [
     "typescript",
     "javascript",
     "python",
     "vue"
],
"file_peek.searchFileExtensions": [
     ".js",
     ".ts",
     ".html",
    ".css",
    ".scss",
    ".vue"
]

Path Intellisense

作用: 路径自动填充


 

1. 安装Vue CLI 首先,你需要安装Vue CLI。Vue CLI是一个基于Vue.js的官方命令行工具,它可以帮助你快速搭建Vue项目。 在命令行输入以下命令来安装Vue CLI: npm install -g vue-cli 2. 创建Vue项目 安装完Vue CLI之后,你可以使用它来创建Vue项目。在命令行输入以下命令来创建一个新的Vue项目: vue init webpack my-project 其,my-project是你的项目名称。在执行该命令后,Vue CLI会自动下载所需的依赖包,并创建一个基本的Vue项目。 3. 安装Vue插件Visual Studio Code,你需要安装一些Vue插件来提供对Vue项目的支持。以下是一些常用的Vue插件: - Vetur:提供Vue语法高亮、代码补全、错误检查等功能。 - Vue 2 Snippets:提供常用的Vue代码片段,可以快速生成Vue代码。 - Vue Peek:可以在HTML文件快速查看Vue组件的定义。 你可以在Visual Studio Code的扩展商店搜索并安装这些插件。 4. 编辑Vue文件 在Visual Studio Code,你可以打开Vue项目的任何Vue文件,并开始编辑。Vetur插件会自动提供语法高亮、代码补全、错误检查等功能,让你更加方便地编写Vue代码。 5. 运行Vue项目 在Visual Studio Code,你可以使用终端来运行Vue项目。在终端进入Vue项目的根目录,并执行以下命令来启动开发服务器: npm run dev 该命令会启动一个开发服务器,并在浏览器打开Vue项目的首页。你可以在浏览器查看并测试你的Vue应用程序。 以上就是使用Visual Studio Code开发Vue项目的基本步骤。希望对你有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值