转载自 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项目的更多相关文章

  1. 打开已存在 Android项目及常见的问题

    Eclipse 打开已存在 Android项目及常见的问题   1.  点击菜单“File”-- "Import",会弹出 Import 对话框:   2,  选择“General ...

  2. Android开发 打开已存在的项目(以虹软人脸识别sdk的demo为例)

    详细流程参考博客https://blog.csdn.net/z979451341/article/details/79468785 个人遇到的问题与注意点 1.下载Demo后忘记修改appid和sdk ...

  3. vscode打开django项目pylint提示has not "object" member

    vscode 打开 django 项目提示 has not "object" member 是因为 Django 动态地将属性添加到所有模型类中,所以 ide 无法解析. 解决方案 ...

  4. vscode打开SpringBoot项目

    1.使用vscode打开java项目所在文件夹 2.按ctl+~ 打开命令面板 mvn -Dmaven.test.skip=true spring-boot:run

  5. ❤️❤️用最简单的方法在Webstorm中打开已存在项目 和 新建Vue项目 (亲测实用)❤️❤️

    ​ 目录 一:打开已存在项目时 二:新建一个vue项目 使用webstorm创建vue项目创建vue项目各个公司用的工具都不一样 最常见的有HBuilder X,WebStorm,Visual Stu ...

  6. vscode打开文件,中文显示乱码(已解决)

    之前使用vscode打开keil的文件后,发现显示乱码,网上查找资料发现大多是这种方法:将files.autoGuessEncoding改为true,但是并没有用. 发现第二种方法为:在vscode中 ...

  7. 如何使用eclipse打开已有工程

    在开始使用Eclipse的时候,会发现一个问题,那就是如何打开一个现有的Eclipse工程,开始在菜单中找了好久也没找到. 其实,Eclipse生成的结果不像VC,Jcreator那样可以直接打开,若 ...

  8. 在已有 Xcode 项目中 加入Cordova框架

    转自:http://www.jianshu.com/p/656838ae92bc 我们知道,在UIKit中的UIWebView虽然已经提供了很多功能了,比如JavaScript和Objc之间的通信.但 ...

  9. eclipse无法导入已有android项目

    问题: 今天发现我拷贝的一个android项目无法导入到eclipse,但是其它的已有android项目却可以导入 思路 现在网络这么流行,当然是上网查,得益于eclipse无法导入Android工程 ...

随机推荐

  1. C# 中的#if、#elif、#else、#endif等条件编译符号 (转载)

    这些是C#中的条件编译符号.这些指令我在项目中遇到过,查过网络,问过人(当然,既不认识大牛,也不认识小牛,所以没什么收获).今天翻看一本资料,有提到这个方面的东西,所以写下来和能看到这篇文章的人一起学 ...

  2. CentOS7网络连接问题以及重启网络服务失败

    1.重启网络服务失败 在运行“/etc/init.d/network restart”命令时,出现错误“Job for network.service failed. See 'systemctl s ...

  3. iOS12适配及问题记录,Debug正常使用,Release数据为nil的报错

    Debug模式数据一切正常,打包出去的ipa,Release模式下数据为nil的错误,经排查,buiding中的Optimization Level, Release设为None,解决问题. IOS1 ...

  4. Struts2+AJAX+JQuery 实现用户登入与注册功能

    要求:必备知识:JAVA/Struts2,JS/JQuery,HTML/CSS基础语法:开发环境:MyEclipse 10 关于UI部分请查看下列链接,有详细制作步骤: 利用:before和:afte ...

  5. Web | JavaScript的闭包

    闭包 function outter(){ var a = 1; function inner(){ console.log(a); } return inner; } //进行函数调用 var in ...

  6. MySQL学习之路(一)——初涉MySQL。

    MySQL学习之路(一) 1.1MySQL的概述 MySQL由瑞典MySQL AB公司开发,目前属于Oracle公司. MySQL是一个开源的关系型数据库管理系统. MySQL分为社区版和企业版. 1 ...

  7. 什么是ajax和json,说说他们的优缺点

    ajax异步传输的js和xml.实现页面无刷新状态更新页面和异步提交 所谓异步,简单解释就是:向服务器发送请求的时候,我们不必等待结果,而是同时做其他的事情,等到有了结果后它自己会根据设定进行后续操作 ...

  8. Spring 约束文件配置

    1.引入jar包 2.新建applicationContext.xml配置文件 位置随意,建议放在src目录下 新建的空xml文件,写入一对beans标签 3.打开Windows-->Prefe ...

  9. VS2015创建WDK的问题

    在微软官网找了半天.. 搜索window driver kit,好吧.进入一页英文页面.. https://docs.microsoft.com/en-us/windows-hardware/driv ...

  10. 自学tensorflow——1.框架初步了解以及构建简单的计算图计算

    1.初步了解 tensorflow是谷歌的一款开源深度学习框架.运行前,需要先定义好计算图,最后通过会话启动计算图,这么做的目的是为了防止数据在python和c++(tensorflow底层)传输的时 ...