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