如何让vue项目跑起来(示例:阿里短视频上传项目vue版demo)

在cmd操作如下:
node -v
npm -v

由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的国内镜像---cnpm
cnpm -v 报错,cnpm不是内部指令。解决办法如下:
安装cnpm
https://jingyan.baidu.com/article/9080802239521cfd90c80f55.html

完成之后,我们就可以用cnpm代替npm来安装依赖包了。

安装vue-cli脚手架构建工具
cnpm install -g vue-cli

安装webpack
cnpm install webpack -g

进入别人的(或网上下载的)vue项目。注意:首先要删掉别人vue项目里面的node_modules,不然会安装报错!

安装项目所需的依赖:
cnpm install

好了,vue项目所需要的环境和依赖都装好了。
一切准备就绪,启动项目
cnpm run dev

好,恭喜:报错了:node_env不是内部或外部指令.......
百度原因是:windows 执行 前端node 项目的兼容性问题,windows不支持NODE_ENV=development的设置方式,这种操作在powershell中不被支持,在cmd中也不被支持,这是Mac中bash或Linux的shell中的独特操作。

解决办法:安装across-env解决跨平台问题
cnpm install cross-env –-save-dev
https://www.cnblogs.com/zhishaofei/p/8441032.html

修改阿里项目里的package.json文件:
1、在所有NODE_ENV前面加上cross-env(注意二者之间留空格)。
2、阿里这个项目默认启动运行ip是0.0.0.0,要改成自己电脑的ip,否则打不开。(我电脑本地IP是192.168.0.120)

修改好了,再重新试下:Let‘s Go 启动
D:\ali\cnpm run dev

在浏览器输入给出的访问链接地址:http://192.168.0.120:3000/

ok完美,花了将近2个小时终于把阿里的短视频上传vue版demo跑起来了,以前我主要是搞后端和接口方面,看来我也可以转转前端了。走起。。。。。。

多会一项新技术就比别人多一个竞争利器,多一条路。

原文地址:https://blog.51cto.com/xuqin/2428305

时间: 2024-08-28 23:03:56

如何让vue项目跑起来(示例:阿里短视频上传项目vue版demo)的相关文章

项目总结56:阿里云OSS上传的图片被自动旋转问题解决

问题:上传图片到阿里云OSS,再再HTML标签使用OSS图片路径,展示的图片被自动旋转了:但是将图片图片路径直接浏览器打开,是原始没有旋转过的: 解决方案: 阿里云文档已经说明了解决方案,链接:https://help.aliyun.com/document_detail/44691.html?spm=a2c4g.11186623.6.1160.1c5d149dByJ2yu 原因是某些手机拍摄出来的照片可能带有旋转参数(存放在照片exif信息里面),img处理图片是会识别这个旋转参数 即在URL

部署(3.上传项目到云服务器)

1.项目准备 1.后端django项目 1.settings.py中配置公网ip才允许访问: ALLOWED_HOSTS = ['49.234.49.146'] 2.settings.py中关闭开发调试模式: DEBUG = False 3.生成requirements.txt pip freeze >requirements.txt 4.将项目打包成.zip包 2.前端的vue项目 1.删除项目下的node_modules文件夹 2.打包项目成.zip包 2.使用FileZilla上传项目包到

阿里云服务器上传文件失败

最近一直在学习WEB方面的内容,自己做了一个练习站,也没了个阿里云服务作为测试,过程中遇到了不少情况! 首先,由于我用的是ThinkPHP框架,遇到的第一个大麻烦便是上传的内容不能显示在界面上,提示有关于runtime的问题,同时,当我需要上传更多的文件时出现了偶尔成功但大多失败的情况,flashFXP提示553Could not create file.招了好多资料都没有看到什么好的建议或者解决办法,只是明确了问题的根本在于文件的权限.根据好心人提示修改目录权限,我干脆直接把整个目录文件的权限

Spring Boot + Vue 前后端分离,两种文件上传方式总结

在Vue.js 中,如果网络请求使用 axios ,并且使用了 ElementUI 库,那么一般来说,文件上传有两种不同的实现方案: 通过 Ajax 实现文件上传 通过 ElementUI 里边的 Upload 组件实现文件上传 两种方案,各有优缺点,我们分别来看. 准备工作 首先我们需要一点点准备工作,就是在后端提供一个文件上传接口,这是一个普通的 Spring Boot 项目,如下: SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/

直接利用本地git上传项目到github

http://m.blog.csdn.net/article/details?id=50441442 本文将详细介绍如何托管你的项目到github上   转载请标明出处: http://blog.csdn.net/lxk_1993/article/details/50441442   一.首先你要有三个东西  github账号.上传工具msysgit 和 你的项目. 1.注册一个github账号 要托管到github,那你就应该要有一个属于你自己的github帐号,所以你应该先注册一个账号. 打

[iOS问题归总]iPhone上传项目遇到的问题

1. 在上传项目的时候,UpLoad App Store后弹出iTunes Store operation failed. 错误原因:你在ItunesConnect(https://itunesconnect.apple.com) 网站里没有对应这个com.lidongxu.zaka555 这个Bundle Id的应用 解决办法:去(https://itunesconnect.apple.com)添加个应用(注意套装ID就是你的Bundle ID)具体请看http://www.cnblogs.c

github Desktop上传项目

原文地址:http://www.cnblogs.com/rosej/p/6056467.html 首先,我们需要github账号一枚,在本地安装github Desktop, 第一步,安装本地的github Desktop,并且登陆.登陆成功后,显示如下.注意:此处的chat和react-native为自己建好的库,若是用户第一次使用github Desktop 则没有这两个库. 第二步,进入github官网,https://github.com/   登陆 第三步,选择 Repositorie

iOS开发——项目实战总结&类微信朋友圈发动态功能初步-图片与视频上传

类微信朋友圈发动态功能初步-图片与视频上传 最近在做一个新的项目,涉及到了关于图片和视频上传和显示的功能,研究了一段时间,总结一下. 使用AFNetworking上传图片(可一次上传多张图片,包含不同类型png, jpeg)和视频 1 AFHTTPRequestOperationManager *manager = [AFHTTPRequestOperationManager manager]; 2 3 AFHTTPRequestOperation *operation = [manager P

用Git向gitHub上传项目

用Git向gitHub上传项目 1.安装git 2.在git安装目录下,运行git-bash.exe  如图所示 3.在git中绑定你注册gitHub是的用户名.邮箱. $ git config --global user.name "gxn888"    // "gxn888"换成你的用户名$ git config --global user.email "[email protected]"    //[email protected]  换