vue学习第一次课---安装与运行

vue第一次课安装和运行

安装node.js

下载网址:https://nodejs.org/en/
进入网址直接下载就好

更新nmp包管理器

打开命令提示符(最好用管理员模式打开吧,反正我是的QAQ)。
输入下面两行命令

npm update -g       //更新
npm -v              //查看版本

安装并运行vue.js

找到一个你觉得比较好的位置,创好文件夹,通过命令提示符进入该文件夹

请添加图片描述

然后输入

npm init vite@latest my-vue-app --template vue

之后会出现如下界面
请添加图片描述

下载完之后,我们可以直接找到,我们直接在下载vue的位置
用vscode打开my-vue-app这个文件夹,查看版本的话到package.json看就好了
大概长这样。
请添加图片描述

然后我们在vscode里新建一个终端(vscode最上面有一个终端,点击下拉菜单内有新建终端)
然后在终端里输入

npm install   //安装项目所需要的依赖文件
//等他安装完
npm run dev   //运行项目

然后打开浏览器,输入http://localhost:3000

出现下面样式窗口就是成功了
请添加图片描述

成功之后
在终端用ctrl + c来终止运行

打包部署

1.打包静态资源
nmp run build

这样就会生成一个dist文件(可以在vscode左边栏看到)

2.部署生产环境

下载caddy
下载地址:https://caddyserver.com/download
github地址::https://github.com/caddyserver/caddy
版本:v2

下载完之后,下载之后应该会出现文件caddy_windows_adm34.exe
我们将它改成caddy.exe,然后放到我们的能找到的地方
之后配环境变量(如果配的是用户变量那就要重启电脑)

完成后我们可以先打开一个终端试一试,直接输入caddy.exe,
请添加图片描述
出现上图就是成功了。

部署静态文件

还是在vscode打开my-vue-app这个文件夹,新建一个终端
cd 到dist文件目录下(一定要进到dist文件目录下不然后续操作会失败)
输入下面命令

caddy file-server

出现下面信息表示成功
请添加图片描述
在浏览器里输入localhost:80进入,还是之前那个带大V的界面,出现就成功过了

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值