详解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 相关文章推荐
Web前端设计模式  制作漂亮的弹出层
Oct 29 Javascript
一个网马的tips实现分析
Nov 28 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
Jan 04 Javascript
今天是星期几的4种JS代码写法
Sep 17 Javascript
js 弹出框只弹一次(二次修改之后的)
Nov 26 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
Aug 24 Javascript
最常见的左侧分类菜单栏jQuery实现代码
Nov 28 Javascript
浅谈javascript中的数据类型转换
Dec 27 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
May 22 Javascript
详解Angular 4.x NgIf 的用法
May 22 Javascript
vue 实现滚动到底部翻页效果(pc端)
Jul 31 Javascript
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
微信小程序下拉菜单效果的实例代码
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
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
php递归列出所有文件和目录的代码
2008/09/10 PHP
php中有关字符串的4个函数substr、strrchr、strstr、ereg介绍和使用例子
2014/04/24 PHP
jQuery+php简单实现全选删除的方法
2016/11/28 PHP
利用 fsockopen() 函数开放端口扫描器的实例
2017/08/19 PHP
jQuery 方法大全方便学习参考
2010/02/25 Javascript
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
JS生成和下载二维码的代码
2016/12/07 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
2016/12/26 Javascript
基于JS实现bookstore静态页面的实例代码
2017/02/22 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
2018/02/26 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
js数据类型转换与流程控制操作实例分析
2019/12/18 Javascript
[04:03][TI9趣味短片] 小鸽子茶话会
2019/08/20 DOTA
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
python实现根据文件关键字进行切分为多个文件的示例
2018/12/10 Python
Python中一般处理中文的几种方法
2019/03/06 Python
Python基础学习之函数方法实例详解
2019/06/18 Python
python集合的创建、添加及删除操作示例
2019/10/08 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
Kate Spade美国官网:纽约新兴时尚品牌,以包包闻名于世
2017/11/09 全球购物
美国最大的在线生存商店:Survival Frog
2020/12/13 全球购物
印度电子产品购物网站:Vijay Sales
2021/02/16 全球购物
企业宣传标语
2014/06/09 职场文书
公司给客户的感谢信
2015/01/23 职场文书
护理专业自荐信范文
2015/03/06 职场文书
自主招生自荐信格式范文
2015/03/25 职场文书
2015小学五年级班主任工作总结
2015/05/21 职场文书
离职信范本
2015/06/23 职场文书
2019职场单身人才调研报告:互联网行业单身比例最高
2019/08/07 职场文书
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python