欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

VSCode搭建vue项目的实现步骤

时间:2022-07-31 09:19:53|栏目: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校验的错误或警告,如下图)

 解决:注释掉这一行

上一篇:vue cli2 和 cli3去掉eslint检查器报错的解决

栏    目:vue

下一篇:详解Vue项目部署遇到的问题及解决方案

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

本文地址:http://www.codeinn.net/misctech/209474.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有