精华内容
下载资源
问答
  • vscode运行vue项目命令
    2021-07-06 16:22:16

    1.Ctrl+shift+Y呼出控制台,在控制台终端输入npm install添加包依赖 。在这里插入图片描述
    2.终端执行npm run dev代表开始运行项目,这条命令会自动在浏览器上运行项目,运行结果如下图所示,代表配置成功了
    在这里插入图片描述
    3.(ctrl+点击)网址http://localhost:8080 vscode运行vue项目成功!!!
    vue学习笔记记录,

    更多相关内容
  • 使用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项目

    2022-08-31 14:31:17
    检查安装情况:打开cmd,依次输入node -v 和 npm -v,查看到版本号,则安装成功。代表开始运行项目,这条命令会自动在...使用vscode运行别人工程里的vue项目。用vscode打开vue项目。呼出控制台,在控制台点击。...

    目标

    使用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项目(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、node.js环境(npm包管理器)
    3、vue-cli 脚手架构建工具
    4、cnpm npm的淘宝镜像

    一、下载并安装vscode

    在上一篇博客中写过附上地址:
    https://blog.csdn.net/m0_46698214/article/details/118354958

    二、配置node.js环境

    安装node.js
    1、从node.js官网下载并安装node(https://nodejs.org/en/)
    一般都是点击下一步,到选择安装位置,我一般安装在D盘
    node安装位置
    其他的都是全部点击下一步,直到安装完毕
    在这里插入图片描述

    安装成功,文件夹结构如下,并在上面安装过程中已自动配置了环境变量和安装好了npm包,此时可以执行 node -v 和 npm -v 分别查看node和npm的版本号:

    在这里插入图片描述

    node文件夹结构

    此处说明下:新版的Node.js已自带npm,安装Node.js时会一起安装,npm的作用就是对Node.js依赖的包进行管理,也可以理解为用来安装/卸载Node.js需要装的东西

    2、配置node环境变量
    配置路径
    3、配置系统变量
    因为在执行例如npm install webpack -g等命令全局安装的时候,默认会将模块安装在C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中,不方便管理且占用C盘空间,如下图所示:
    在这里插入图片描述
    执行命令:
    npm config set prefix “D:\development\nodeJS\node_global”
    npm config set cache “D:\development\nodeJS\node_cache”
    更改数据存储路径
    执行成功。然后在环境变量 -> 系统变量中新建一个变量名为 “NODE_PATH”, 值为“D:\development\nodeJS\node_modules”,如下图:
    新增系统变量NODE_PATH

    最后编辑用户变量里的Path,将相应npm的路径改为:D:\development\nodeJS\node_global,如下:
    编辑环境变量前
    更改前:
    编辑环境变量后
    在cmd命令下执行 npm install webpack -g 然后安装成功后可以看到自定义的两个文件夹已生效:测试webpack
    webpack 也已安装成功,执行 npm webpack -v 可以看到所安装webpack的版本号:
    查看webpack版本号

    三、安装cnpm

    在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org 然后等待,安装完成如下图。
    cnpm安装图
    报错:
    报错图片
    原因:
    问题所在cnpm文件夹与npm文件夹不在同一文件夹下(npm 全局下载的包都在D:\development\nodeJS\node_global\node_modules目录下)
    cnpm所在文件夹:D:\development\nodeJS\node_global\node_modules
    npm所在文件:D:\development\nodeJS\node_modules
    配置环境变量
    解决:
    将cnpm文件夹移动至npm所在的文件夹下,再将cnpm和cnpm.cmd文件移至npm与npm.cmd所在的文件夹即可解决问题

    cnpm文件夹移动前:
    移动前目录
    cnpm文件夹移动后目录:
    移动后的文件
    cnpm和cnpm.cmd文件移动前:
    移动前
    cnpm和cnpm.cmd文件移动后
    移动后
    验证cnpm是否安装成功,可以通过查看版本:cnpm -v
    cnpm安装成功

    四、构建vue-cli脚手架

    执行命令cnpm install -g vue-cli
    构建vue-cli脚手架
    执行命令
    npm/cnpm install -g vue
    npm/cnpm install -g @vue/cli-init
    第二个用cnpm 否则很慢
    在这里插入图片描述
    报错vue不是内部命令或外部命令
    在这里插入图片描述

    查看vue所在的路径
    在这里插入图片描述

    查看vue.cmd是否存在
    在这里插入图片描述
    配置环境变量
    在这里插入图片描述
    重新打开cmd命令提示行输入vue --version
    在这里插入图片描述
    创建vue空项目
    在命令行中运行命令 vue init webpack firstVue。
    这个命令的意思是初始化一个项目,其中webpack是构建工具,也就是整个项目是基于webpack的。其中firstVue是整个项目文件夹的名称,这个文件夹会自动生成在你指定的目录中

    项目未创建成功:
    报错:
    Command vue init requires a global addon to be installed.
    Please run yarn global add @vue/cli-init and try again.
    在这里插入图片描述

    在这里插入图片描述
    执行命令:cnpm install -g @vue/cli-init
    在这里插入图片描述
    执行命令:
    vue init webpack firstVue 成功
    在这里插入图片描述

    声明:本篇博客部分内容参考以下两篇作者博客,特此鸣谢
    https://blog.csdn.net/antma/article/details/86104068
    https://www.cnblogs.com/weiwei-python/p/9754384.html

    展开全文
  • 该博客之前建议查看上两篇博客关于vscode安装与vue环境配置 1、vscode安装 2、vue环境配置 vue插件的安装 vetur安装 该插件是vue文件基本语法的高亮插件,在插件窗口中输入vetur点击安装插件就行。 eslint安装 ...
  • 使用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项目详细全过程(node.js环境的配置)

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

    千次阅读 2022-04-28 09:06:49
    首先需要安装nodejs,因为要使用npm 命令 1、新建一个文件夹(我新建的文件夹是...3、输入命令vue init webpack myvue(初始化项目) 中间会出现一些配置,直接按回车就可以了 初始化项目完成: 4、之后..
  • vscode创建vue项目

    2022-07-31 11:31:33
    参考https//blog.csdn.net/weixin_45633422/article/details/115019629和https//teech-lab.com/vue-js-vscode-settings/1041/
  • VScode启动Vue项目

    千次阅读 2021-03-17 16:14:14
    VScode启动Vue项目 { "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Launch Program", // "console": "none", // 只输出到“调试控制台”
  • LiveShare允许即时共享当前的项目,即使在调试时也是如此。使用Better Comments扩展,你可以将注释分为警告、询问、待办、重点等几大类。vscode没有自动跳出可展开的内容,按下Tab键,如果代码正确,也可以自动展开...
  • VSCode搭建vue项目

    千次阅读 2021-07-22 10:56:57
    一、安装环境: ...1.开始创建vue项目,首先创建一个文件夹用来存放项目,用vscode打开对应的文件夹,并在终端cd到对应的文件夹。比如我的文件夹就是VUE 注意:接下来的命令需要在cmd命令窗口,vscode默认
  • VueVSCode搭建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项目的环境,并完成首个VUE项目的创建、调试、打包部署实验。
  • vscode上搭建一个vue项目—初学总结。 1.假设Vscode、nodejs等已经安装好了。 2.全局安装vue-cli,vue-cli可以帮助我们快速构建Vue项目。 安装命令: npm install -g vue-cli 打开VScode的终端,调出命令输入框。...
  • 1、需要先安装npm install
  • VsCode开发vue项目快捷键持续更新 1.概述 这篇文章总结开发vue项目中常用的快捷操作,提升开发效率。 2.开发项目常用快捷键 1.格式化代码 创建vue项目使用了代码规范检查插件,在开发项目时不符合规范的代码将报错,...
  • 搭建vue项目
  • vsCode搭建vue项目

    2022-05-13 12:24:24
    安装vue-cli脚手架,使用vsCode搭建vue项目
  • 如何利用vscode运行vue前端项目vscode运行vue前端项目vscode[下载](https://code.visualstudio.com/)vscode切换中文导入vue项目安装[node.js](https://nodejs.org/en/download/)运行vue项目 vscode运行vue前端项目 ...
  • 1、在config文件夹找到index.js文件夹 2、把autoOpenBrowser: true 3、改为autoOpenBrowser: false
  • VsCode 配置 Vue 项目

    2022-08-14 15:26:20
    Vscode 搭建 VUE
  • VSCode搭建Vue项目

    2021-10-21 09:47:19
    4、安装完成之后就可以开始创建vue项目,首先创建一个文件夹用来存放你的项目,用vscode打开对应的文件夹,并在终端cd到对应的文件夹。比如我的文件夹就是myvue vue init webpack myvue 这里可能会遇到问题。会报...
  • vscode启动vue项目

    万次阅读 多人点赞 2018-11-23 22:16:14
    学习完vue环境搭建并创建项目后下面我们介绍使用vscode运行vue项目。 一:下载vscode地址为:https://code.visualstudio.com/ 然后根据自己的电脑下载对应的版本。  二:语言的修改 当我们下载安装完成后我们...
  • VSCode配置Vue项目

    千次阅读 2020-06-15 19:07:22
    1、下载安装VSCode,直接到官网下载 官网地址:https://code.visualstudio.com/ 下载一个.zip压缩包,解压即可用 2、汉化 按快捷键Ctrl+shift+P打开命令面板,选择 安装中文简体 安装完后重启即可 3、...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,199
精华内容 2,479
关键字:

vscode运行vue项目命令