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的界面，出现就成功过了