广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >VSCode搭建vue项目的实现步骤
  • 300
分享到

VSCode搭建vue项目的实现步骤

2024-04-02 19:04:59 300人浏览 独家记忆
摘要

目录一、安装环境:二、建项目:一、安装环境: 1.默认vscode、nodejs已经安装好了 2.全局安装Vue-cli,vue-cli帮助我们快速构建Vue项目。 npm inst

一、安装环境:

1.默认vscodenodejs已经安装好了

2.全局安装Vue-cli,vue-cli帮助我们快速构建Vue项目。

npm install -g @vue/cli

3.安装webpack (打包js工具)

npm install -g WEBpack

二、建项目:

1.开始创建vue项目,首先创建一个文件夹用来存放项目,用vscode打开对应的文件夹,并在终端cd到对应的文件夹。比如我的文件夹就是VUE

注意:接下来的命令需要在cmd命令窗口,vscode默认是powershell,需要自己改一下。

vue create 项目名

3.接着运行项目,先cd到项目文件夹(这里我的项目叫 myvue),cd myvue,然后输入以下指令。(这部可能会报错,解决方法在文章最下方)

npm run serve

4.接着在浏览器里输入:Http://localhost:8081(vscode给的链接,大家可能会有点不一样),看到如下vue页面就是成功啦。

5.项目打包发布上线

npm run build

完成之后,项目文件夹中会出现一个dist文件夹,里面就是打包之后的内容,直接部署就好了。

问题:npm run serve时可能会报错(关于eslint校验的错误或警告,如下图)

 解决:注释掉这一行

 到此这篇关于VSCode搭建vue项目的实现步骤的文章就介绍到这了,更多相关VSCode搭建vue项目内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: VSCode搭建vue项目的实现步骤

本文链接: https://www.lsjlt.com/news/140143.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • VSCode搭建vue项目的实现步骤
    目录一、安装环境:二、建项目:一、安装环境: 1.默认Vscode、nodejs已经安装好了 2.全局安装vue-cli,vue-cli帮助我们快速构建Vue项目。 npm inst...
    99+
    2022-11-13
  • vue-cli5搭建vue项目的实现步骤
    vue-cli 的最新版本是5.0.4 首先需要全局安装 vue-cli yarn global add @vue/cli 已经安装的可以升级到最新版 yarn global up...
    99+
    2022-11-13
  • 使用vscode搭建javaweb项目的详细步骤
    目录工具准备创建web项目运行项目总结工具准备 jdk, maven, tomcat9, vscode; 上述软件的安装配置在百度就能找到很多教程, 所以此处不详述. (jdk使用1...
    99+
    2022-11-13
    vscode开发javaweb项目 vscode怎么创建javaweb工程 vscode配置javaweb环境
  • VSCode创建Vue项目的完整步骤教程
    目录一、配置环境1.安装VS Code2.安装node.js3.安装配置脚手架vue-cli二、创建vue项目1.命令方式创建2.重新初始化依赖3.启动项目补充:在VScode中如何...
    99+
    2022-11-13
  • 使用webpack手动搭建vue项目的步骤
    目录一、前提条件二、手动搭建vue项目的步骤:1. 创建项目2. 生成package.json文件3. 引入webpack和创建webpack.config.js文件4. 创建ind...
    99+
    2023-03-02
    webpack搭建vue项目 如何搭建vue项目
  • 使用Vite搭建vue3+TS项目的实现步骤
    目录vite简介初始化项目修改vite.config.ts安装ts依赖和ESLint安装Axios配置跨域安装Lessvite简介 vite 是一个基于 Vue3 单文件组件的非打包...
    99+
    2023-01-11
    Vite搭建vue3+TS项目
  • vscode搭建java开发环境的实现步骤
    目录前言一、安装Java Extension Pack插件二、配置全局的Java与Maven三、开始创建Maven项目四、配置该项目的settings.json五、补全项目结构代码与...
    99+
    2023-03-07
    vscode搭建java环境 vscode java搭建环境
  • Vite创建项目的实现步骤
    目录前言yarn create 做了什么源码解析项目依赖模版配置工具函数copycopyDiremptyDir核心函数命令行交互并创建文件夹写入文件小结前言 随着 Vite2 的发...
    99+
    2022-11-12
  • Vite搭建React项目的方法步骤
    目录前言创建一个 Vite 项目改造工程目录约定其他配置前言 日常放鸽,火钳刘明 这是一个基于 vite 搭建的 React 的项目,开发体验非常棒。 创建一个 Vite 项目 ...
    99+
    2022-11-12
  • Vue进行环境搭建和项目构建的操作步骤
    这篇文章主要介绍了Vue进行环境搭建和项目构建的操作步骤,具有一定借鉴价值,需要的朋友可以参考下。下面就和我一起来看看吧。为什么要使用VueVue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以创建可维护性和可测试性更...
    99+
    2023-06-14
  • vue3+ts+vant移动端H5项目搭建的实现步骤
    目录1.全局安装vue-cli2.使用vue ui 可视化创建项目3.打开项目4、安装vant,并实现按需引入5、移动端适配(rem)使用vue-cli搭建项目 1.全局安装vue-...
    99+
    2022-11-13
  • VSCode断点调试CMake工程项目的实现步骤
    断点调试在【排查代码错误】时,发挥着巨大的作用!本文旨在使用VS Code实现对CMake工程项目的【断点调试】。 初始状态 假设我们已经有一个CMake工程项目(比如从github...
    99+
    2022-11-11
  • docker部署vue项目的实现步骤
    目录前戏部署获取nginx镜像创建 nginx config配置文件创建Dockerfile文件生成生成环境包构建docker镜像查看本地镜像启动docker容器访问跨域前戏 当我们...
    99+
    2022-11-13
  • IDEA+Maven搭建JavaWeb项目的方法步骤
    目录前言1. 项目搭建2. 配置项目添加web部署的插件3. 项目运行使用Tomact插件运行项目4. 注意事项前言 本章节主要内容是描述如何使用maven构建javaweb项目 M...
    99+
    2022-11-12
  • springCloud项目搭建流程步骤分解
    实现跨服务的远程调用(RestTemplate) 业务场景:在返回订单信息数据中显示用户信息 实现思路:基于RestTemplate发起的http请求实现远程调用 1.注册RestT...
    99+
    2022-11-13
  • Vue UI创建项目详细步骤
    1.首先要安装最新的Vue CLI 在命令行工具里输入一下命令 npm install -g @vue/cli 或者 yarn global add @vue/cli 安装成功后,可...
    99+
    2022-11-12
  • 手把手教你搭建一个vue项目的完整步骤
    目录一、环境准备1、安装node.js2、检查node.js版本3、为了提高我们的效率,可以使用淘宝的镜像源二、搭建vue环境1、全局安装vue-cli三、创建vue项目1、用cmd...
    99+
    2022-11-13
  • 详解Vue-cli来构建Vue项目的步骤
    首先需要安装Vue-cli: npm install -g vue-cli 全局先安装Vue-cli,安装好了Vue-cli。就可以使用它来构建项目 vue init w...
    99+
    2022-11-12
  • VScode搭建OpenCV环境的详细步骤
    目录安装MinGW-w64安装CMake生成MakeFiles编译OpencvVScode配置  用vscode来写opencv代码需要自己编译OpenCV,主要用到MinGW-w6...
    99+
    2022-11-12
  • Docker搭建部署Node项目的方法步骤
    目录什么是Docker客户端DockerDocker基本操作镜像名称拉取镜像其他操作DockerfileDocker-compose构建nginx-node-postgres项目前段...
    99+
    2022-11-12
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作