转载自 https://blog.csdn.net/yoryky/article/details/78290443

下载安装并配置VSCode

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

1、vetur插件的安装

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

  1. "emmet.syntaxProfiles": {
  2. "vue-html": "html",
  3. "vue": "html"
  4. }
  • 1
  • 2
  • 3
  • 4

2、eslint插件的安装

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

  1. "eslint.validate": [
  2. "javascript",
  3. "javascriptreact",
  4. "html",
  5. "vue"
  6. ],
  7. "eslint.options": {
  8. "plugins": ["html"]
  9. }

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. 大话Linux内核中锁机制之信号量、读写信号量

    大话Linux内核中锁机制之信号量.读写信号量 在上一篇博文中笔者分析了关于内存屏障.读写自旋锁以及顺序锁的相关内容,本篇博文将着重讨论有关信号量.读写信号量的内容. 六.信号量 关于信号量的内容,实 ...

  2. standby_file_management 参数为manual 导致ORA-01111问题

    情景: Dataguard 物理备库执行恢复报错: Errors in file /home/u01/app/diag/rdbms/rzorcl11g/ORCL/trace/ORCL_pr00_358 ...

  3. 获取 iOS APP 内存占用的大小

    当我们想去获取 iOS 应用的占用内存时,通常我们能找到的方法是这样的,用 resident_size:   #import <mach/mach.h> - (int64_t)memory ...

  4. mysql/mariadb学习记录——连接查询(JOIN)

    //本文使用的数据表格//persons表中id_p为主键//orders表中id_o为主键,id_p为外键参考persons表中的id_p mysql> select * from perso ...

  5. 飞控入门之C语言结构体、枚举

    结构体 先来说明一下,结构体存在的意义.比如说有一只猫,要在C语言程序中综合描述它,那么可以这样说,它的体重是float类型的,颜色是char类型的,它的一些食物名字是一个数组,那么如果分开定义这些变 ...

  6. python从Excel中提取邮箱

    从各个城市的律师协会去爬取的律师的招聘信息,可是邮箱在招聘简介里面,所有需要写个脚本去提取邮箱 import pandas as pd import re regex = r"([-_a-z ...

  7. SSM-CRUD入门项目——查询

    查询 1.基础查询 分析:访问项目主页 index.jsp 时应该跳转到列表页 我们可以在index.jsp发出查询员工列表请求,来到 list.jsp 使用插件 pageHelper 完成分页功能— ...

  8. 20155321 《Java程序设计》实验报告一:Java开发环境的熟悉(Windows+IDEA)

    实验要求 使用JDK编译.运行简单的Java程序: 使用IDEA 编辑.编译.运行.调试Java程序. 实验内容 命令行下Java程序开发 打开windows下的cmd → 输入cd Code命令进入 ...

  9. Nginx入门篇(四)之常用配置解析

    1.Nginx状态信息功能 Nginx的模块当中有一个ngx_http_stub_status_module模块,这个模块主要记录Nginx的基本访问信息,要使用该模块,需要在编译的时候增加http_ ...

  10. Linux系统运维基础管理命令总结

    1.查看系统负载命令:w.uptime [root@localhost ~]# w :: up days, :, user, load average: 0.00, 0.01, 0.05 USER T ...