VSCode搭建vue项目的实现步骤

目录
  • 一、安装环境：
  • 二、建项目：

一、安装环境：

1.默认Vscode、nodejs已经安装好了

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项目内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解VScode编辑器vue环境搭建所遇问题解决方案

    前言 为什么选择VScode? 在之前我用过sublime.webstorm.atom.Brackets.eclipse.HBuilder.notepad++等等.应该还有一些用过几次的编辑器,记不起来的,这些编辑器的作用不外乎一点--为了开发迅速.基本都会自带代码提示插件.随着项目越来越大,出了一系列问题,而这些问题会大量浪费我们的时间(我们只想简单的编程),故而编辑器插件的数量和支持程度成为了我们选择编辑器的重要条件,这就是为什么选择VScode,它拥有大量的插件,可以帮助我们完成我们没必要

  • Vue环境搭建+VSCode+Win10的详细教程

    一.安装Node.js(js的运行环境) 1.在Node.js官网https://nodejs.org/en/download/ 下载安装包. 2.下载后进行安装. 3.打开命令行,输入node -v可以查看到版本号.输入npm –v可看到npm版本号. 新版的Node.js已自带npm(类似.net中的nuget包管理器),安装Node.js时会一起安装.(将来要更新npm可用这个命令npm intall npm@latest -g) 4.在我的win10系统中可以看到环境变量也已经自动配置好

  • 搭建vscode+vue环境的详细教程

    一.安装vue.js 1.简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js是一个MVVM模式的框架,如果读者有angul

  • VSCode搭建Vue项目的方法

    在vscode上搭建一个vue项目---初学总结. 1.假设Vscode.nodejs等已经安装好了. 2.全局安装vue-cli,vue-cli可以帮助我们快速构建Vue项目. 安装命令: npm install -g vue-cli 打开VScode的终端,调出命令输入框.点击终端-新建终端,输入上述命令,回车,等待安装完成. 3.安装webpack,它是打包js的工具 安装命令: npm install -g webpack 安装方法同上. 4.安装完成之后就可以开始创建vue项目,首先创

  • VSCode搭建vue项目的实现步骤

    VSCode搭建vue项目的实现步骤

    目录 一.安装环境: 二.建项目: 一.安装环境: 1.默认Vscode.nodejs已经安装好了 2.全局安装vue-cli,vue-cli帮助我们快速构建Vue项目. npm install -g @vue/cli 3.安装webpack (打包js的工具) npm install -g webpack 二.建项目: 1.开始创建vue项目,首先创建一个文件夹用来存放项目,用vscode打开对应的文件夹,并在终端cd到对应的文件夹.比如我的文件夹就是VUE 注意:接下来的命令需要在cmd命令

  • vue-cli5搭建vue项目的实现步骤

    vue-cli5搭建vue项目的实现步骤

    vue-cli 的最新版本是5.0.4 首先需要全局安装 vue-cli yarn global add @vue/cli 已经安装的可以升级到最新版 yarn global upgrade --latest @vue/cli 然后开始使用 vue-cli 5 搭建项目 ‘hello-world’ vue create hello-wold 会出现下面的配置项: 1. 选择自动配置还是手工配置 选择手工配置 2. 选择插件 选择babel,typscript,路由,css预编译,代码格式化 3.

  • VSCode创建Vue项目的完整步骤教程

    VSCode创建Vue项目的完整步骤教程

    目录 一.配置环境 1.安装VS Code 2.安装node.js 3.安装配置脚手架vue-cli 二.创建vue项目 1.命令方式创建 2.重新初始化依赖 3.启动项目 补充:在VScode中如何使用vue代码 总结 一.配置环境 1.安装VS Code 官网下载 https://code.visualstudio.com/ 下载VS Code,按照步骤安装. 2.安装node.js (1)官网 https://nodejs.org/en/ 下载node.js,按照步骤安装即可,node.j

  • 9102年webpack4搭建vue项目的方法步骤

    前言 首先祝大家元宵节快乐,最近已经好久没有写过文章了,刚好趁着这几天刚刚上班,领导还没有来,偷偷的写一篇关于webpack搭建vue的博客.因为公司使用vue比较多,构建vue项目使用vue-cli显得有点臃肿,感觉还是自己配置比较好些,所以就有了这篇教程.由于水平有限,欢迎大家指正,一起进步. 新建项目 1.新建名为webpackconfig文件夹 2.使用命令 npm init -y 在webpackconfig文件夹中生成package.josn 3.下载依赖包 npm i webpac

  • vscode 开发Vue项目的方法步骤

    下载地址: vscode https://marketplace.visualstudio.com/VSCode或者本地地址:https://www.jb51.net/softs/606746.html 开始安装插件 Vetur : vue的文件代码高亮 Atom One Dark Theme : 好看的代码颜色主题 Simple icon theme :清爽文件夹主题 Prettier - code : 代码格式化 ESLint :代码规范检查 Debugger for Chrome :断点调

  • 手把手教你搭建一个vue项目的完整步骤

    手把手教你搭建一个vue项目的完整步骤

    目录 一.环境准备 1.安装node.js 2.检查node.js版本 3.为了提高我们的效率,可以使用淘宝的镜像源 二.搭建vue环境 1.全局安装vue-cli 三.创建vue项目 1.用cmd命令创建项目 1.1创建文件 1.2选择配置信息 1.3选择版本 1.4路径模式选择 1.5语法代码格式检查 1.6第三方文件存在的方式 1.7是否保存本次配置信息(保存预设) 1.8创建成功 1.9运行 1.10启动 1.11停止服务 2.用vue资源管理器创建 2.1进入vue资源管理器界面(vu

  • Vs-code/WebStorm中构建Vue项目的实现步骤

    Vs-code/WebStorm中构建Vue项目的实现步骤

    目录 一.使用Vue脚手架(vue-cli)构建Vue项目 二.使用Vite构建工具构建Vue项目 三.WebStorm中创建Vue项目(使用Vite构建工具) 一.使用Vue脚手架(vue-cli)构建Vue项目 1.打开cmd安装或升级Vue脚手架 npm install -g @vue/cli 2.进入工作目录创建Vue项目 vue create 项目名称 3.进入项目目录,启动项目 npm run serve 4.项目目录用处: 4.1.public目录:静态资源文件夹.index.ht

  • 详解用vue-cli来搭建vue项目和webpack

    vue-cli 用vue-cli来搭建vue项目 第一步:全局安装vue-cli sudo npm install vue-cli -g 第二步:初始化一个项目 vue init webpack-simple projectName 第三步:把文件切换到初始化的项目中 cd projectName 第四步:安装依赖 npm install 当然也可以用淘宝镜像cnpm来安装,这样快很多 cnpm install 第五步:运行 npm run dev 完成一个初始化vue项目 webpack 要开

  • 使用vue cli4.x搭建vue项目的过程详解

    cli-4.x已经发布好久了,斟酌了好久,还是决定将原来的cli-2.x升级到4.x,详细的升级过程可以戳这里 1.创建项目 vue create vuetest 2.选择配置方式 ? Please pick a preset: (Use arrow keys) ☜(使用箭头键) > default (babel, eslint) ☜(使用默认的配置,会安装babel和eslint) Manually select features ☜(手动配置) 这里我选择的是手动配置(使用↑ ↓箭头切换,E

随机推荐