转载自 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. nDPI 的论文阅读和机制解析

    nDPI: Open-Source High-Speed Deep Packet Inspection Wireless Communications & Mobile Computing C ...

  2. eclipse删除的文件如何恢复。

    1.如果不小心删除了单个文件或者文件夹. 鼠标点击上级目录 Ctrl+z就可以恢复了. 如果没有恢复,就右击项目,选择Resore from Local History 然后选择你所删除的文件,选择恢 ...

  3. 基于 Axis2的webService接口的基本开发步骤

    Axis2webServicejavaWeb 前言: 今天给大家分享一下前段时间在做项目的时候做webservice接口的一些心得. 在web工程lib目录下导入 Axis2相关jar包 enter ...

  4. 容易忽略的expect脚本问题,暗藏的僵尸进程,wait命令不要漏掉

    问题描述 前几天有个小需求,用到expect脚本去循环的发送一些数据,主要问题代码如下: #! /usr/bin/expect while {true} { set timeout 60 spawn ...

  5. 关于alias同时使用多个命令小记。

    为了方便自己快速使用命令,接触了一下alias.在使用多个命令时,一般有两种方式.各有不同 根据需求选择. 直接上代码: 1.alias Name='(date;pwd;cmd1;cmd2) 写法简洁 ...

  6. docker 入门 (一)重要概念介绍

    序 之前一直想学一下docker,但是基本看完就忘记了,下次用还是要再翻一下教程. 最近项目要用,连续用了一段时间,就熟练了,基本的使用以及概念都记住了. 趁现在还刚入门,就把入门一些容易遇到的问题记 ...

  7. C语言实现文件复制功能(包括文本文件和二进制文件)

    文件的复制是常用的功能,要求写一段代码,让用户输入要复制的文件以及新建的文件,然后对文件进行复制.能够复制的文件包括文本文件和二进制文件,你可以复制1G的电影,也可以复制1Byte的txt文档. 实现 ...

  8. Altera三速以太网IP核快速仿真与使用(上篇)

    对于比较高级的ip核,altera一般都会提供仿真案例,网上有关于这个IP核的各种仿真方法,但都比较繁琐,前几日,朋友跟我分享了一个比较快速高效的仿真方法,这个方法也是他摸索折腾了一段时间才总结出来的 ...

  9. 20155230 《Java程序设计》实验五 Java网络编程及安全

    20155230 <Java程序设计>实验五 Java网络编程及安全 实验内容 1.掌握Socket程序的编写: 2.掌握密码技术的使用: 3.设计安全传输系统. 实验1 两人一组结对编程 ...

  10. 百度地图Map属性和方法

    map的L属性:TANGRAM__1 map的F属性:[object Object] map的xa属性:[object HTMLDivElement] map的width属性:1340 map的hei ...