下载安装并配置VSCode

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

1、vetur插件的安装

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


  1. "emmet.syntaxProfiles": {
  2. "vue-html": "html",
  3. "vue": "html"
  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直接文件->打开文件夹 导入项目,Ctrl+shift+Y呼出控制台,在控制台终端输入npm install添加包依赖 

如果没有安装npm请先安装npm。

2、运行项目

同样在终于执行npm run dev代表开始运行项目,这条命令会自动在浏览器上运行项目,运行结果如下图所示,代表配置成功了。 

原文地址:https://blog.csdn.net/ywl570717586/article/details/79754543

VSCode配置启动Vue项目的更多相关文章

  1. webstorm 点击右上角运行run 启动vue项目

    点击右上角框 -> 编辑结构 点击加号 新增一个npm项目 前提:node环境已经安装完成,npm包管理器 1.进行定位到项目的路径2.安装依赖包,npm install3.启动服务,npm r ...

  2. vue全家桶安装以及修改webpack配置新增vue项目启动方式

    一.安装node环境(自带npm) 下载地址 二.替换下载源 // 淘宝 NPM 镜像 npm install -g cnpm --registry=https://registry.npm.taob ...

  3. VSCode 启动 Vue 项目 npm install 报错

    1.  报错后,查看了版本. 查看node版本:node -v 查看npm版本:npm -v 查看Augular版本:ng --version 2.  感觉 Augular CLI版本太低,使用以下方 ...

  4. pycharm启动vue项目

    一 移动vue项目问题 1 移植到其他windows or mac 2 重新安装依赖 基于情况2(我们把除了第一个文件都复制到一个新的文件夹) 重新依据配置文件去安装各种各样的依赖(也就是根据配置文件 ...

  5. VSCode 初次写vue项目并一键生成.vue模版

    VSCode 写vue项目一键生成.vue模版 1.新建代码片段 文件-->首选项-->用户代码片段-->点击新建代码片段--取名vue.json 确定 2.配置快捷生成的vue模板 ...

  6. 搭建vue项目并启动vue项目

    链接地址:https://blog.csdn.net/aa792978017/article/details/82939483 Vue.js是现在比较优秀的Web前端框架,下面开始从零开始搭建一个Vu ...

  7. window10下启动vue项目具体步骤

    1. 安装nodejs 直接去nodejs官方网站下载安装包(https://nodejs.org/zh-cn/) 然后在cmd窗口里面输入 node -v 可以检测出来nodejs是否在全局环境下安 ...

  8. VSCode中使用vue项目ESlint验证配置

    如果在一个大型项目中会有多个人一起去开发,为了使每个人写的代码格式都保持一致,就需要借助软件去帮我们保存文件的时候,自己格式化代码 解决办法:vscode软件下载一个ESLint,在到设置里面找到se ...

  9. vscode启动vue项目出错,给了管理员权限没用

    今天在安装vue环境测试项目的时候, 发现vscode调用终端异常,语句无法运行,百度上给的解决方法是给管理员权限 给了以后发现没用,怎么试都没用,然后想到了,重启大法,然后问题就完美解决了

随机推荐

  1. matplotlib无法显示中文

    import matplotlib as mpl mpl.rcParams['font.sans-serif'] = ['KaiTi']mpl.rcParams['font.serif'] = ['K ...

  2. Spring Boot Redis 集成配置(转)

    Spring Boot Redis 集成配置 .embody{ padding:10px 10px 10px; margin:0 -20px; border-bottom:solid 1px #ede ...

  3. 学习JDK1.8集合源码之--TreeMap

    1. TreeMap简介 TreeMap继承自AbstractMap,实现了NavigableMap.Cloneable.java.io.Serializable接口.所以TreeMap也是一个key ...

  4. jedis与spring整合及简单的使用RedisTemplate操作

    整理一下redis与spring的整合.以及使用redisTemplate.首先是要导入spring所需要的jar.当然还有 jedis-2.1.0.jar,commons-pool-1.5.4.ja ...

  5. Spring_事务

    事务管理: 用来确保数据的完整性和一致性 事务就是一系列的动作,它们被当做一个单独的工作单元.这些动作要么全部完成,要么全部不起作用 事务的四个关键属性 原子性 一致性 隔离性 持久性 Spring两 ...

  6. eclipse修改中文注释的字体(亲测有用!)

    Window –> Preferences –> General –> Appearance –> Colors and Fonts –> Basic –> Tex ...

  7. DirectX11笔记(三)--Direct3D初始化代码

    原文:DirectX11笔记(三)--Direct3D初始化代码 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u010333737/article ...

  8. vue中router以及route的使用

    路由基本概念 route,它是一条路由. { path: '/home', component: Home } routes,是一组路由. const routes = [ { path: '/hom ...

  9. POJ1485 Sumdiv

    Sumdiv Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 22680   Accepted: 5660 Descripti ...

  10. Leetcode700.Search in a Binary Search Tree二叉搜索树中的搜索

    给定二叉搜索树(BST)的根节点和一个值. 你需要在BST中找到节点值等于给定值的节点. 返回以该节点为根的子树. 如果节点不存在,则返回 NULL. class Solution { public: ...