天景科技苑

这个屌丝很懒，什么也没留下！

热门标签

VS code上创建Vue项目详细化教程1-配置VScode与Vue_vue vscode

作者：天景科技苑 | 2024-07-29 02:54:48

踩

vue vscode

1.首先安装VS code

2.安装VS code必备插件

2.1 Chinese (Simplified) Language Pack

2.2 Code Spell Checker

2.3 HTML CSS Support

2.4 JavaScript (ES6) code snippets

2.5 Mithril Emmet

2.6 Path Intellisense

2.12 Bracket Pair Colorizer

2.13 open in browser

2.14 Vetur

2.15 File Utils

2.16 IntelliJ IDEA Keybindings(根据个人喜好安装)

2.17 快捷键（Windows版）

3.简单Vue实例，感受Vue双向绑定特点

4.创建并使用工程化Vue项目

1.首先安装VS code

此处省略，找到安装包然后无脑安装就好。

2.安装VS code必备插件

2.1 Chinese (Simplified) Language Pack

适用于 VS Code 的中文（简体）语言包

2.2 Code Spell Checker

拼写检查器。比如 banana 单词写错成 banane ，会提示你是否修改成 banana ，也可以将 banane 添加至检查器的字典中。

2.3 HTML CSS Support

在编写样式表的时候，自动补全功能大大缩减了编写时间。

2.4 JavaScript (ES6) code snippets

支持ES6语法提示

2.5 Mithril Emmet

一个能大幅度提高前端开发效率的一个工具，用于补全代码

2.6 Path Intellisense

路径提示插件

2.7 Vue 3 Snippets

在 Vue 2 或者 Vue 3 开发中提供代码片段，语法高亮和格式化的 VS Code 插件，能极大提高你的开发效率。

2.8 VueHelper

vscode最好的vue代码提示插件，不仅包括了vue2所有api，还含有vue-router2和vuex2的代码

2.9 Auto Close Tag

自动闭合HTML/XML标签

2.10 Auto Rename Tag

自动完成另一侧标签的同步修改

2.11 Beautify

格式化 html ,js,css

安装过程中, 如果提示是否需要继续安装, 选择 "仍要安装"。

2.12 Bracket Pair Colorizer

给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色

安装过程中, 如果提示是否需要继续安装, 选择 "仍要安装"。

2.13 open in browser

vscode不像IDE一样能够直接在浏览器中打开html，而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件，支持自定义打开指定的浏览器，包括：Firefox，Chrome，Opera，IE以及Safari

2.14 Vetur

Vue多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。vscode官方钦定Vue插件，Vue开发者必备。

2.15 File Utils

File Utils插件,可以方便快捷的来创建、复制、移动、重命名文件和目录。

2.16 IntelliJ IDEA Keybindings(根据个人喜好安装)

安装VSCode的插件 IntelliJ IDEA Keybindings 即可在VSCode中使用IDEA的快捷键。

2.17 快捷键（Windows版）

18、快捷键（Mac版）

3.简单Vue实例，感受Vue双向绑定特点

创建一个html文件，并引入vue js文件（两种方式1.引入线上文件 2.引入下载到本地的Vue.js文件），注意使用的是Vue2还是Vue3。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <!-- 下面是线上文件引入 （Vue2） -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> 
 
    <!-- 下面是本地文件引入 -->
    <script src="vue.js"></script>
<body>
    <div id="app">
        <input type="text" v-model="message">
        双向绑定：{{message}}
    </div>
</body>
<script>
    new Vue({
        el:"#app",    //通过id选择将此Vue对象与上面input组件绑定
        data:{
            message:"Hello"   //Vue对象中的数据
        }
    })
</script>
</html>

上面代码实现的是，将输入框与后面的文本进行双向绑定，使得后面文本与文本框内容实时变化。

4.创建并使用工程化Vue项目

大型Vue项目搭建，及所需环境配置请参考下一篇文章：

VS code上创建Vue项目详细化教程2-配置并创建Vue项目https://blog.csdn.net/weixin_49418695/article/details/139499396?spm=1001.2014.3001.5502

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/天景科技苑/article/detail/896851