VSCode打开已有vuejs项目
转载自 https://blog.csdn.net/yoryky/article/details/78290443
下载安装并配置VSCode
随便百度上搜个最新的VSCode安装好后,点击Ctrl + Shit + X打开插件扩展窗口进行插件扩展,这里要安装两个插件。
1、vetur插件的安装
该插件是vue文件基本语法的高亮插件,在插件窗口中输入vetur点击安装插件就行,装好后点击文件->首选项->设置 打开设置界面,在设置界面右侧添加配置
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
}
- 1
- 2
- 3
- 4
2、eslint插件的安装
eslint智能错误检测插件,在具体开发中作用很大,能够及时的帮我们发现错误。至于安装,同样打开插件扩展窗口输入eslint点击安装插件,装好后也需要进行配置,在同vetur插件一样的地方进行配置
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue"
],
"eslint.options": {
"plugins": ["html"]
}
vetur和eslint插件在配置中如下图所示
导入项目并编译
1、导入项目
从github上下载vuestic-admin项目(https://github.com/epicmaxco/vuestic-admin.git),拉到本地后打开VSCode直接文件->打开文件夹 导入项目,在控制台终端输入npm install添加包依赖
如果没有安装npm请先安装npm。
2、运行项目
同样在终于执行npm run dev代表开始运行项目,这条命令会自动在浏览器上运行项目,运行结果如下图所示,代表配置成功了。
如果提示Couldn't find preset "es2015" relative to directory问
就加上npm install babel-preset-es2015 --save-dev
有什么不懂得,希望留言共同学习。
VSCode打开已有vuejs项目的更多相关文章
- 打开已存在 Android项目及常见的问题
Eclipse 打开已存在 Android项目及常见的问题 1. 点击菜单“File”-- "Import",会弹出 Import 对话框: 2, 选择“General ...
- Android开发 打开已存在的项目(以虹软人脸识别sdk的demo为例)
详细流程参考博客https://blog.csdn.net/z979451341/article/details/79468785 个人遇到的问题与注意点 1.下载Demo后忘记修改appid和sdk ...
- vscode打开django项目pylint提示has not "object" member
vscode 打开 django 项目提示 has not "object" member 是因为 Django 动态地将属性添加到所有模型类中,所以 ide 无法解析. 解决方案 ...
- vscode打开SpringBoot项目
1.使用vscode打开java项目所在文件夹 2.按ctl+~ 打开命令面板 mvn -Dmaven.test.skip=true spring-boot:run
- ❤️❤️用最简单的方法在Webstorm中打开已存在项目 和 新建Vue项目 (亲测实用)❤️❤️
目录 一:打开已存在项目时 二:新建一个vue项目 使用webstorm创建vue项目创建vue项目各个公司用的工具都不一样 最常见的有HBuilder X,WebStorm,Visual Stu ...
- vscode打开文件,中文显示乱码(已解决)
之前使用vscode打开keil的文件后,发现显示乱码,网上查找资料发现大多是这种方法:将files.autoGuessEncoding改为true,但是并没有用. 发现第二种方法为:在vscode中 ...
- 如何使用eclipse打开已有工程
在开始使用Eclipse的时候,会发现一个问题,那就是如何打开一个现有的Eclipse工程,开始在菜单中找了好久也没找到. 其实,Eclipse生成的结果不像VC,Jcreator那样可以直接打开,若 ...
- 在已有 Xcode 项目中 加入Cordova框架
转自:http://www.jianshu.com/p/656838ae92bc 我们知道,在UIKit中的UIWebView虽然已经提供了很多功能了,比如JavaScript和Objc之间的通信.但 ...
- eclipse无法导入已有android项目
问题: 今天发现我拷贝的一个android项目无法导入到eclipse,但是其它的已有android项目却可以导入 思路 现在网络这么流行,当然是上网查,得益于eclipse无法导入Android工程 ...
随机推荐
- 【Javascript-基础-ecma6】ecma6学习笔记(持续更新)
makdown语法手册API String 新特性的方法 基本不支持IE浏览器 String.fromCodePoint(6特性) String.prototype.codePointAt(6特性) ...
- Python 学习笔记(十四)Python类(三)
完善类的内容 示例: #! /usr/bin/env python # coding =utf-8 #通常类名首字母大写 class Person(object): """ ...
- 精准测试白皮书v3.0-2019最新版
现代社会是建立在各种以计算机为基石的软件技术基础之上的.随着日新月异的需求变化,软件系统越来越复杂.很多人觉得软件开发才是重要环节,但实际上,无法对大型软件进行有效的质量把控,就无法真正构建与维护大型 ...
- 获取并安装XWAF框架压缩包(2)
建议在Eclipse环境下使用XWAF框架来开发用户的Web项目,并遵循以下步骤和约定. 1.获取XWAF框架压缩包文件 程序员点击下列地址免费下载XWAF框架的压缩包文件:XWAF框架压缩文件 2. ...
- Unity 4.7 导出工程在XCode10.1上编译报错
Unity 4.7 导出工程在XCode 10.1上编译报错,而在XCode 9.3上是可以正常编译运行的.原因是Unity4.7所依赖的头文件和库文件在XCode10上没有了,解决办法如下,把XCo ...
- Spring boot Mybatis整合构建Rest服务(超细版)
Springboot+ Mybatis+MySql整合构建Rest服务(涵盖增.删.改.查) 1.概要 1.1 为什么要使用Spring boot? 1.1.1 简单方便.配置少.整合了大多数框架 ...
- 误卸载glibc类库导致系统崩溃解决方案
由于系统中没有yum环境需要编译安装redis,但系统中却没有安装gcc和gcc-c++,挂载本地镜像安装gcc和gcc-c++由于版本太高,由于一时疏忽误将系统的依赖库glibc使用rpm -e 命 ...
- WebGl 一个缓冲区传递颜色和坐标(矩形)
效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- bootstrap世界探索1——山川河流(文字排版)
世界到底是什么?其实世界很简单,正所谓一花一世界,一树一菩提,世界就在我们身边.造物神是伟大的,在我看来无论是HTML,css,js都可以看作是一个世界,但是他们是构成宏观世界不可或缺的,正如IU框架 ...
- MySQL+Service+Servlet+Jsp实现Table表格分页展示数据
下面以一个示例讲解如何使用MySQL+Service+Servlet+Jsp实现Table表格分页展示数据: eg:请假管理系统 要求如下: 一.打开首页页面, 访问查询请假记录的 servlet , ...