精华内容
下载资源
问答
  • 使用vscode运行vue项目
    2022-08-31 14:31:17

    目标

    使用vscode运行别人工程里的vue项目

    工作

    1. 安装node

    2. 检查安装情况:打开cmd,依次输入node -v 和 npm -v,查看到版本号,则安装成功。

    3. 用vscode打开vue项目

    4. 使用快捷键Ctrl+shift+Y呼出控制台,在控制台点击终端输入npm install 或者 npm i 添加包依赖。
      在这里插入图片描述
      运行结果如下所示:
      在这里插入图片描述

    5. 最后执行npm run dev代表开始运行项目,这条命令会自动在浏览器上运行项目,运行结果如下图所示,代表配置成功了。
      在这里插入图片描述

    6. 点击(ctrl+点击)网址http://localhost:80/,可得运行结果

    更多相关内容
  • 使用vscode运行vue项目

    千次阅读 2022-07-18 16:25:31
    学习完vue环境搭建并创建项目后下面我们介绍使用vscode运行vue项目。!! 文章参考:https://www.csdn.net/gather_29/OtTagg3sNzA2LWJsb2cO0O0O.html & ...

    !!学习完vue环境搭建并创建项目后下面我们介绍使用vscode运行vue项目。!!
    文章参考:https://www.csdn.net/gather_29/OtTagg3sNzA2LWJsb2cO0O0O.html & https://www.jianshu.com/p/80ae9b1b8fae

    https://blog.csdn.net/ycy0706/article/details/113529337

    【如果你和我一样是菜鸟的话,点进来的时候不要被文章长度吓到了,因为我写的特别详细所以看起来篇幅比较长,加上截图比较庞大。我怀疑之前由于截图较小 博客没自动给我加水印,导致文章发不出去,咱就是怀疑,咱也不敢问 ^ < ^ 。继续加油八!!】

    一:下载vscode地址为:https://code.visualstudio.com/
    然后根据自己的电脑下载对应的版本,我的是Windows X64。
    在这里插入图片描述
    二:语言的修改(Visual Studio Code附有10种可用的显示语言:英文(美国),简体中文,繁体中文,法文,德文,意大利文,日文,韩文,俄文和西班牙文,这些语言包一般都包含在Visual Studio Code中不用额外下载。但例外总无法避免,从微软官网下载的版本就没带中文语言包,所以需要单独下载。)

    当下载安装完成后,我们会发现显示的全都是英文,一头蒙啊,果断的改变语言。ctrl+shift+p ,切入到命令行模式,输入“Configure Language”,然后点击下拉框出来的 Configure Display Language,然后会出现一个界面(若你是最新版vscode,不会出现该界面,选中不是“en”那一行之后,显示如下图),把其中"locale":“en"改成"locale”:"zh-CN"即可*[①]。
    在这里插入图片描述
    在这里插入图片描述
    中文语言包安装好以后,软件会自动重启,然后变成中文版,如下图:
    在这里插入图片描述
    *[①]:进入Configure Display Language后,没找到注释①处说的更改界面,我就没管,直接选择了“安装其他语言”(当时选项是英文的哈)。
    中文语言包安装好后,再进入Configure Display Language,多了一行“zh-cn”,点击该行, 看到重启提示 点击重启 , 如下图所示:
    在这里插入图片描述
    重启之后,语言修改便完成了!!(现在我知道为啥注释①那里没有跳出百度上说的界面了,我下载的最新版vscode,系统默认带有“en”语言版本,只有先下载了中文语言包后才有“zh-cn”选项,最后选中它再重启生效即可!!)

    三:vue插件的安装

    1、vetur插件的安装
    该插件是vue文件基本语法的高亮插件,在插件窗口中(快捷键是ctrl+shift+x)输入vetur点击安装插件就行
    在这里插入图片描述
    装好后点击文件->首选项->设置 打开设置界面,在设置界面右侧添加配置。点击“在settings.json中编辑”,进入代码编辑界面。
    在这里插入图片描述
    输入Vetur文档代码:

     
    
    1. {

    2. "emmet.syntaxProfiles": {

    3. "vue-html": "html",

    4. "vue": "html"

    5. },

    6. }

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

     
    
    1. {

    2. "eslint.validate": [

    3. "javascript",

    4. "javascriptreact",

    5. "html",

    6. "vue"

    7. ],

    8. "eslint.options": {

    9. "plugins":["html"]

    10. }

    11. }

    显示如下图:
    在这里插入图片描述
    3.Auto Close Tag 自动闭合HTML/XML标签,下载,见4图:

    4.Auto Rename Tag 自动完成另一侧标签的同步修改,下载
    在这里插入图片描述
    5.Debugger for Chrome 映射vscode上的断点到chrome上,方便调试
    在这里插入图片描述
    四:然后打开我们的vue项目【若之前没用命令行建立过vue项目,详情请见Vue开发环境搭建及在docs新建vue项目】,右键——>打开文件夹,然后导入项目(我的项目在D盘,文件夹名为my-vue)。
    在这里插入图片描述
    Ctrl+shift+Y呼出控制台,在控制台终端输入npm install添加包依赖 。
    在这里插入图片描述
    五:同样在终于执行npm run dev代表开始运行项目,这条命令会自动在浏览器上运行项目,运行结果如下图所示,代表配置成功了。
    在这里插入图片描述
    六:点击(ctrl+点击)网址http://localhost:8080,运行结果如下:
    在这里插入图片描述
    到此,使用vscode运行vue项目成功啦,完结啦!

    转载:使用vscode运行vue项目_xw_09的博客-CSDN博客_vscode运行vue项

    展开全文
  • 使用VScode运行vue项目

    千次阅读 2020-05-25 14:49:27
    使用VScode运行vue项目 创建vue项目 1、打开终端(快捷键Ctrl+~)打开终端 2、输入命令 创建项目 vue init webpack 项目名 3、可查看项目 命令代码 cd 项目名 4、运行项目 命令代码 npm run dev 如果报错 可先...

    使用VScode运行vue项目

    创建vue项目

    1、打开终端(快捷键Ctrl+~)打开终端
    终端图
    2、输入命令 创建项目
    vue init webpack 项目名
    输入命令结尾显示的代码
    3、可查看项目 命令代码 cd 项目名
    输入命令,路径变到项目路径下  可去文件夹查看
    4、运行项目 命令代码 npm run dev 如果报错 可先输入命令 cnpm run dev 试试。
    自动生成的默认端口
    5、端口加项目名浏览器运行 localhost:8081/helloword
    运行成功图

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

    1. 打开VSCode

    1. 下载vetur插件

    该插件是vue文件基本语法的高亮插件,在插件窗口中输入vetur点击安装插件就行,
    在这里插入图片描述

    装好后 点击文件->首选项->设置 ->打开设置 界面,在设置界面右侧添加配置。

    "emmet.syntaxProfiles": {
            "vue-html": "html",
            "vue": "html"
          }
    

    在这里插入图片描述

    2. 下载eslint插件

    它是一款智能错误检测插件
    在这里插入图片描述

    ESLint 不是安装后就可以用的,还需要一些环境和配置:

    1.首先,需要全局的 ESLint , 如果没有安装可以使用CMD 输入npm install -g eslint来安装;

    2.其次,vue文件是类 HTML 的文件,为了支持对 vue 文件的 ESLint ,

    需要eslint-plugin-html这个插件。可以使用CMD输入: npm install -g eslint-plugin-html 来安装;

    在这里插入图片描述

    当上述两个都装好后,还需要在 vscode 中配置下 ESLint:在同vetur插件一样的地方进行配置

    "eslint.validate": [
          "javascript",
           "gavesciptreact",
           "html",
           "vue"
       ],
       "eslint.options": {
           "plugins":["html"]
       },
    

    在这里插入图片描述

    3. Auto Close Tag 自动闭合HTML/XML标签

    在这里插入图片描述

    4. Auto Rename Tag 自动完成另一侧标签的同步修改

    在这里插入图片描述

    5. Debugger for Chrome

    映射vscode上的断点到chrome上,方便调试
    在这里插入图片描述

    6. Prettier-Code formatter插件

    代码格式化插件
    在这里插入图片描述

    2. 打开vue项目

    在终端输入:npm install,先下载对应的依赖。

    但是报错了!!
    在这里插入图片描述
    原因:此类原因是虽然在全局下安装了,但是可能vscode的终端模式是powershell模式,点击右面的+号,选择Command Prompt 模式,
    我们就可以看到powershell转化为cmd执行

    VSCode使用管理员身份打开!!!就可以了
    在这里插入图片描述
    在这里插入图片描述

    然后输入:npm start,或者npm run dev运行项目:
    在这里插入图片描述

    2. 番外-使用VS Code构建VUE项目必备的几款常用插件:

    1、Auto Rename Tag 修改 html 标签,自动帮你完成尾部闭合标签的同步修改,和 webstorm 一样

    2、Auto Close Tag 自动闭合HTML标签

    3、Vscode-icons 让 vscode 资源目录加上图标

    4、Vue 2 Snippets vue必备vue代码提示

    5、Path Intellisense 自动路径补全、默认不带这个功能

    6、Vue-color vue 语法高亮主题

    展开全文
  • vscode运行vue项目

    2021-06-19 16:44:36
    vscodevue项目环境搭建和项目运行 文章目录在vscodevue项目环境搭建和项目运行前言一、vue环境的搭建1.node2.检查是否安装成功 Windows + R 输入 cmd3.安装淘宝镜像(经操作跳过此步不成功)4.安装脚手架5....
  • 如何用vscode运行vue项目(vue环境搭建)

    万次阅读 多人点赞 2021-06-30 11:15:45
    首先,先列出我们在vscode运行vue项目所需要的东西 1、下载并安装vscode 2、node.js环境(npm包管理器) 3、vue-cli 脚手架构建工具 4、cnpm npm的淘宝镜像 一、下载并安装vscode 在上一篇博客中写过附上地址: ....
  • 该博客之前建议查看上两篇博客关于vscode安装与vue环境配置 1、vscode安装 2、vue环境配置 vue插件的安装 vetur安装 该插件是vue文件基本语法的高亮插件,在插件窗口中输入vetur点击安装插件就行。 eslint安装 ...
  • VScode运行Vue项目详细全过程(node.js环境的配置)

    千次阅读 热门讨论 2021-07-13 14:44:49
    在用VScode运行Vue项目前,我们需要先配置node.js环境,就类似于使用eclipse前需要配置Java环境的这个过程。 一、安装node.js并配置环境变量 1、安装 从官网下载安装包,解压到指定位置,就相当于安装完成了。...
  • VScode 调试vue项目配置

    2022-06-24 12:12:04
    VScode 调试vue项目配置
  • VSCode运行Vue项目后自动打开浏览器

    千次阅读 2022-02-22 17:19:18
    因脚手架版本的不同,项目运行可以使用npm run dev 和 npm run serve 当使用npm run start 的时候在config文件里面找到index.js文件,修改里面的属性 autoOpenBrowser: true, 当使用npm run serve 的时候在根...
  • vscodevue项目中,关于代码检查和格式化,遇到各种各样的问题,比如: 不清楚安装的拓展的功能,导致安装了重复功能的拓展 右键格式化文档的时候,不是按eslint的规则来格式化,导致需要我再次手动调整 保存...
  • VSCode搭建vue项目

    千次阅读 2021-07-22 10:56:57
    一、安装环境: ...1.开始创建vue项目,首先创建一个文件夹用来存放项目,用vscode打开对应的文件夹,并在终端cd到对应的文件夹。比如我的文件夹就是VUE 注意:接下来的命令需要在cmd命令窗口,vscode默认
  • 95% emitting <--- Last few GCs ---> [21992:03DAAAD8] 186031 ms: Scavenge 728.6 (755.0) -> 728.5 (755.0) MB, 1.0 / 0.0 ms (average mu = 0.997, current mu = 0.969) allocation failure [21992:03DAAAD8] ...
  • 【Vue】VSCode搭建Vue项目

    千次阅读 2022-01-24 23:16:42
    vscode上搭建一个vue项目---初学总结。 1.假设Vscode、nodejs等已经安装好了。 2.全局安装vue-cli,vue-cli可以帮助我们快速构建Vue项目。 安装命令: npm install -g vue-cli 打开VScode的终端,调出命令...
  • vscode创建vue项目

    千次阅读 2022-04-28 09:06:49
    首先需要安装nodejs,因为要使用npm 命令 1、新建一个文件夹(我新建的文件夹是myvue),用vscode打开这个文件,再用vscode新建一个终端:点击终端-->新建终端,然后输入命令:npm install -g vue-cli,如下: ...
  • 点击:运行>添加配置 弹出该界面,点击Node.js(需提前安装Node) 传到该界面 更改为相应浏览器Chrome/firefox { "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", ...
  • vscode运行vue项目关闭eslint语法校验

    千次阅读 2020-12-07 22:03:10
    将箭头指向的那一行注释掉
  • LiveShare允许即时共享当前的项目,即使在调试时也是如此。使用Better Comments扩展,你可以将注释分为警告、询问、待办、重点等几大类。vscode没有自动跳出可展开的内容,按下Tab键,如果代码正确,也可以自动展开...
  • 若安装失败,可以尝试使用: 1,配置淘宝镜像:npm config set registry https://registry.npm.taobao.org 2,配置完成后检验是否成功:npm config get registry 3,重新运行命令:npm install -g @
  • 搭建VSCODE开发VUE项目的环境,并完成首个VUE项目的创建、调试、打包部署实验。
  • vscode运行vue项目报错

    2022-08-11 09:51:46
    vscode运行vue项目报错
  • 使用vscode创建vue项目后在浏览器打开无法触发vue.js devtools
  • 今天c盘突然爆红了,大概剩余12G。vs code卸载重装到别的盘,再运行使用了一会儿,c盘仅剩200M,并且运行特别卡。有没有啥解决办法,c盘现在已经剩100M了。
  • vscode上搭建一个vue项目—初学总结。 1.假设Vscode、nodejs等已经安装好了。 2.全局安装vue-cli,vue-cli可以帮助我们快速构建Vue项目。 安装命令: npm install -g vue-cli 打开VScode的终端,调出命令输入框。...
  • vsCode搭建vue项目

    2022-05-13 12:24:24
    安装vue-cli脚手架,使用vsCode搭建vue项目

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,275
精华内容 4,110
热门标签
关键字:

使用vscode运行vue项目

友情链接: dsp2812.rar