详解VSCode配置启动Vue项目


Posted in Javascript onMay 14, 2019

下载安装并配置VSCode

随便百度上搜个最新的VSCode安装好后,点击Ctrl + Shit + X打开插件扩展窗口进行插件扩展,这里要安装两个插件。

1、vetur插件的安装

该插件是vue文件基本语法的高亮插件,在插件窗口中输入vetur点击安装插件就行,装好后点击文件->首选项->设置 打开设置界面,在设置界面右侧添加配置

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

2、eslint插件的安装

eslint智能错误检测插件,在具体开发中作用很大,能够及时的帮我们发现错误。至于安装,同样打开插件扩展窗口输入eslint点击安装插件,装好后也需要进行配置,在同vetur插件一样的地方进行配置

"eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue"
  ],
 
 "eslint.options": {
    "plugins": ["html"]
}

etur和eslint插件在配置中如下图所示

详解VSCode配置启动Vue项目

导入项目并编译

1、导入项目

从github上下载vuestic-admin项目(https://github.com/epicmaxco/vuestic-admin.git),拉到本地后打开VSCode直接文件->打开文件夹 导入项目,Ctrl+shift+Y呼出控制台,在控制台终端输入npm install添加包依赖

详解VSCode配置启动Vue项目

如果没有安装npm请先安装npm。

2、运行项目

同样在终于执行npm run dev代表开始运行项目,这条命令会自动在浏览器上运行项目,运行结果如下图所示,代表配置成功了。

详解VSCode配置启动Vue项目

以上所述是小编给大家介绍的VSCode配置启动Vue项目详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Js callBack 返回前一页的js方法
Nov 30 Javascript
javascript xml为数据源的下拉框控件
Jul 07 Javascript
JavaScript Eval 函数使用
Mar 23 Javascript
Javascript的并行运算实现代码
Nov 19 Javascript
jQuery验证插件validation使用指南
Apr 21 Javascript
javascript中的作用域和闭包详解
Jan 13 Javascript
JS组件Bootstrap实现图片轮播效果
May 16 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
Jun 28 Javascript
AngularJS入门教程之MVC架构实例分析
Nov 01 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
Sep 12 Javascript
JavaScript对象访问器Getter及Setter原理解析
Dec 08 Javascript
JavaScript阻止事件冒泡的方法
Dec 06 Javascript
微信小程序下拉菜单效果的实例代码
May 14 #Javascript
jquery+css实现Tab栏切换的代码实例
May 14 #jQuery
jquery实现二级导航下拉菜单效果实例
May 14 #jQuery
js纯前端实现腾讯cos文件上传功能的示例代码
May 14 #Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
May 14 #Javascript
vue如何获取自定义元素属性参数值的方法
May 14 #Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
May 14 #Javascript
You might like
常用的PHP数据库操作方法(MYSQL版)
2011/06/08 PHP
php设计模式小结
2013/02/15 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
javascript:void(0)的真正含义实例分析
2008/08/20 Javascript
xss文件页面内容读取(解决)
2010/11/28 Javascript
JS中把字符转成ASCII值的函数示例代码
2013/11/21 Javascript
JavaScript阻止事件冒泡示例分享
2014/12/28 Javascript
在Python中使用glob模块查找文件路径的方法
2015/06/17 Javascript
javascript封装的sqlite操作类实例
2015/07/17 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
转换layUI的数据表格中的日期格式方法
2019/09/19 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
2019/10/24 Javascript
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
Ant Design的可编辑Tree的实现操作
2020/10/31 Javascript
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
[00:56]跨越时空加入战场 全新祈求者身心“失落奇艺侍祭”展示
2019/07/20 DOTA
Python中使用pprint函数进行格式化输出的教程
2015/04/07 Python
浅谈python jieba分词模块的基本用法
2017/11/09 Python
Python中super函数的用法
2017/11/17 Python
Python Xml文件添加字节属性的方法
2018/03/31 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
numpy基础教程之np.linalg
2019/02/12 Python
Python实现Mysql数据统计及numpy统计函数
2019/07/15 Python
Python3的socket使用方法详解
2020/02/18 Python
Python内置函数locals和globals对比
2020/04/28 Python
使用OpenCV校准鱼眼镜头的方法
2020/11/26 Python
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
经销商培训邀请函
2014/01/21 职场文书
结对共建工作方案
2014/06/02 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
Python 如何解决稀疏矩阵运算
2021/05/26 Python
Spring Boot 启动、停止、重启、状态脚本
2021/06/26 Java/Android
Python爬取奶茶店数据分析哪家最好喝以及性价比
2022/09/23 Python