创建第一个vue3项目、快速入门、安装npm、node.js 、vue3 快速nginx部署、简洁够用

2024-07-17 00:24| 来源: 网络整理| 查看: 265

安装npm 1.下载安装Node.js https://nodejs.org/dist/v18.17.1/node-v18.17.1-x64.msi

都勾选默认，更换路径需要更换环境变量的配置

2.配置环境变量

win+R 输入sysdm.cpl快速打开环境变量在系统变量中Path双击新建，输入你的路径我的如下保存即可

C:\Program Files\nodejs

输入：npm -v

8.19.2

node.js -v

v16.18.1

出现版本号代表安装成功,且node.js版本号至少为v16以上

安装Vue 1.安装脚手架 npm create vue@latest

运行后会让你输入你的项目名称 project name: 输入你的项目名称

默认选no就行

2.初始化vue3 cd 你的项目名称 npm install 3.运行vue3项目 npm run dev

会有一个网址，我的是127.0.0.1:5367打开网址即可看到**You did it!**证明已经成功。用vscode打开你项目文件夹皆可编写代码

vscode配置提示语插件

插件搜索volar,看到的全称应该是

Vue Language Features (Volar)

下载即可

main.js

main.js是整个vue3项目的入口，相当于C/C++的main函数，在src目录下的

main.js

import './assets/main.css' import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app')

理解思路跟vue2差不多创建一个vue实例，选定一个容器**#app**表示容器ID，也就是目录中的index.html下的div标签

index.html DOCTYPE html> Vite App myvue.vue

系统默认给我们创建了一个vue文件vue.vue，里面的代码可能看不懂，可以创建一个自己的myvue.vue，如下

myvue.vue

// 此处可以导入组件、函数等 import {ref} from 'vue' const messge=ref('hello') // vue3 中创建一个内容基本都用ref {{messge}} /* 此处是样式设计区域，相当于css */

更改一下main.js中实例位置

main.js

import './assets/main.css' import { createApp } from 'vue' import App from './App.vue' import myapp from './myapp.vue' createApp(myapp).mount('#app')

此时在上面执行npm run dev给的网址中就可以看到hello

搭建生产包 npm run build

当项目编写完成后，使用该命令构建包，也就是生成在dist目录下生成对应的html.css.js文件，便于布置在nginx服务器上。此时在本地浏览器上是无法打开的。

下载nginx

根据自己想要的版本下载即可，windows下载完是一个zip的压缩包

https://nginx.org/en/download.html

解压以后可以通过双击nginx.exe启动服务，或者配置环境变量，命令行输入nginx启动

配置环境变量

win+R 输入sysdm.cpl快速打开环境变量在系统变量中Path双击新建，输入你的路径我的如下保存即可

C:\Program Files\nginx-1.22.1

打开命令行（win+R->cmd）输入nginx即可启动

浏览器输入：127.0.0.1:80 出现**welcome to nginx **则nginx启动成功

配置本地项目

将刚才vue项目目录中的dist中的所有文件，复制到nginx 目录下的html中，我的是

C:\Program Files\nginx-1.22.1\html

此时打开127.0.0.1:80 ,浏览器就会显示 hello,并且在局域网下的设备输入你在局域网下的ip地址(命令行：ipconfig查看本机IP)加端口号80一般是（192.168.X.X:80）也能访问了。想要在公网显示必须有公网IP这就涉及到服务器网络的问题了。

休息一下本章完结，完整代码github

【本文地址】

公司简介

联系我们