VSCode搭建vue项目的实现步骤

 更新时间:2022年02月23日 08:37:18   作者:healthLau  
本文主要介绍了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项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue开发中遇到的跨域问题及解决方法

    Vue开发中遇到的跨域问题及解决方法

    在本篇文章里小编给大家整理的是关于Vue开发中遇到的跨域问题及解决方法,需要的朋友们可以学习下。
    2020-02-02
  • Vue跨端渲染实现多端无缝衔接

    Vue跨端渲染实现多端无缝衔接

    这篇文章主要介绍了Vue跨端渲染实现多端无缝衔接,Vue跨端渲染是一种基于Vue框架的跨平台开发技术,能够实现Web、iOS和Android三端的无缝衔接,提高开发效率和用户体验
    2023-05-05
  • vue-devtools的安装与使用教程

    vue-devtools的安装与使用教程

    vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率,这篇文章主要介绍了vue-devtools的安装与使用教程,需要的朋友可以参考下
    2023-03-03
  • Vue结合Openlayers使用Overlay添加Popup弹窗实现

    Vue结合Openlayers使用Overlay添加Popup弹窗实现

    本文主要介绍了Vue结合Openlayers使用Overlay添加Popup弹窗实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • 深入理解Vue-cli搭建项目后的目录结构探秘

    深入理解Vue-cli搭建项目后的目录结构探秘

    本篇文章主要介绍了深入理解Vue-cli搭建项目后的目录结构探秘,具有一定的参考价值,有兴趣的可以了解一下
    2017-07-07
  • MVVM模型在Vue中的使用详解

    MVVM模型在Vue中的使用详解

    MVVM模型主要是为了分离视图(View)和模型(Model),其优点为:低耦合、可重用性、独立开发以及可测试,视图和模型分离的特点给了 Vue 很大的启发,这篇文章主要介绍了MVVM模型在Vue中的使用,需要的朋友可以参考下
    2022-11-11
  • vue.config.js中配置Vue的路径别名的方法

    vue.config.js中配置Vue的路径别名的方法

    这篇文章主要介绍了vue.config.js中配置Vue的路径别名的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • vue-vuex中使用commit提交mutation来修改state的方法详解

    vue-vuex中使用commit提交mutation来修改state的方法详解

    今天小编就为大家分享一篇vue-vuex中使用commit提交mutation来修改state的方法详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue-router路由模式详解(小结)

    vue-router路由模式详解(小结)

    这篇文章主要介绍了vue-router路由模式详解(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • vue中el-table实现自动吸顶效果(支持fixed)

    vue中el-table实现自动吸顶效果(支持fixed)

    本文主要介绍了vue中el-table实现自动吸顶效果,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09

最新评论