本文作者:淘青松

vue本地安装到项目打包上线全过程

淘青松 9个月前 ( 02-08 ) 518
vue本地安装到项目打包上线全过程摘要: 安装nodejs环境,下载nodejshttp://nodejs.cn/download/只需要下一步下一步安装即可,安装后运行:node -v 和 npm -v 看到版本号说明安...

安装nodejs环境,下载nodejs

http://nodejs.cn/download/

只需要下一步下一步安装即可,安装后运行:node -v 和 npm -v 看到版本号说明安装成功,如下图

npm版本

使用npm淘宝中国镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装:vue-cli

cnpm install -g @vue/cli  //D:\nodejs\node_cache\cnpm install -g @vue/cli

注:使用以上命令需要配置环境变量,新手很多时候配置不成功,如博主,可以直接使用全路径方式执行命令就没问题了,上面代码后半部分是我的全路径,你的需要自行找一下cnpm对应路径

cnpm中国镜像

安装:webpack

cnpm install -g webpack  //没配置环境变量请用全路径

运行vue图形化管理界面(命令行安装带vue-router完整项目>>vue项目创建安装vue-router

vue ui

如果vue没有环境变量,可以使用全路径,进入创建界面

vue图形化界面创建项目

选择文件夹创建,下一步选择默认,下一步,就会在本地你设置的目录生成项目

vue项目目录

打开命令窗口,切换至项目目录执行

npm run serve

会在浏览器打开:localhost:8080,可以对项目进行实时预览,

本地运行VUE项目

8080端口需要预留出来

VUE项目运行效果

运行命令

npm run build

会在项目目录创建 dist打包项目,将dist中文件放置线上环境,即可访问

VUE项目打包上线

至此,vue安装到上线全过程完毕

文章版权及转载声明

作者:淘青松本文地址:https://cyansong.com/xue/36.html发布于 9个月前 ( 02-08 )
文章转载或复制请以超链接形式并注明出处青松博客

赞(0

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享