一文教会你如何运行vue项目
更新时间：2022年06月06日 16:14:11 作者：。。。-
最近因为公司项目问题,开始学习vue,这篇文章主要给大家介绍了关于如何运行vue项目的相关资料,文中还介绍了如何运行别人的项目,需要的朋友可以参考下
一、运行vue项目
1、下载node.js
安装完成后分别在cmd中执行node -v查看是否安装成功，出现版本号就安装成功了
2、安装 webpack
npm install webpack -g
安装完成后分别在cmd中执行npm -v查看是否安装成功，出现版本号就安装成功了
3、安装vue-cli脚手架
cnpm install vue-cli -g
安装完成后查看vue-cli脚手架 版本确定是否安装成功，出现版本号就安装成功了
vue -V
4、使用vue-cli创建项目
首先创建一个文件夹，cmd 进入到该项目里，输入以下命令
vue create hello-world
注：hello-word是文件夹名字可以改
5、运行项目
输入以下命令来运行项目
cd hello-world
npm run serve
出现以上页面，说明项目运行成功了。
二、运行别人的项目
1、删除package-lock.json文件
package-lock.json记录了整个node_moudles文件夹的树状结构，还记录了模块的下载地址，但是它是基于项目作者的npm版本库生成的，若不删掉这个依赖文件，容易出现npm版本差异导致的报错。
2、切换项目目录
然后打开cmd，cd到项目目录，具体操作：先输入该盘符，然后再用cd命令切换目录。
3、清除npm缓存
npm有缓存时，常常出现安装依赖不成功的现象，且一旦出现这个问题，报错信息很完善，但根据报错信息一项一项去解决，却死活解决不了，还找不出原因。
npm clean cache -f
4、重新安装依赖。
npm install
5、最后运行项目。
npm run serve
总结
到此这篇关于如何运行vue项目的文章就介绍到这了,更多相关vue项目运行内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在本篇文章里小编给大家整理的是关于Vue代码整洁之去重的相关知识点内容，需要的朋友们学习下。2019-08-08
provide和inject在Vue 2中已经被广泛应用，不是新鲜API，3.0重新认识一下它们两个，本文重点给大家介绍vue3中provide和inject的使用，需要的朋友参考下吧2021-07-07
Vue框架可以很方便的引入各种插件,但是也因此会经常遇到种编译报错,这篇文章主要给大家介绍了关于vue前端编译报错解决的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2024-03-03
组件是Vue.js的最核心的功能,所谓的组件化就是把页面拆分成多个组件,每个组件单独使用CSS,JS,模板,图片等资源进行开发与维护,然后在制作网页的时候根据需要调用相关的组件,这篇文章主要给大家介绍了关于vue.js全局组件和局部组件的相关资料,需要的朋友可以参考下2022-12-12
vue-cli脚手架build目录下utils.js工具配置文件详解
这篇文章主要介绍了vue-cli脚手架build目录下utils.js工具配置文件详解,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了在vue项目中封装echarts的步骤，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-12-12
这篇文章主要为大家详细介绍了vue实现数字滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
这篇文章主要介绍了vue跳转页面打开新窗口，并携带与接收参数方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue在外部方法给下拉框赋值后不显示label的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了Vue2中实现双击事件的几种常见方法,Vue2中处理双击事件的方法包括使用@dblclick指令、addEventListener方法和第三方库,这些方法提供了灵活的解决方案,以满足不同的需求,需要的朋友可以参考下2024-11-11
最新评论