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

鹿小苏

已于 2023-09-02 23:35:34 修改

阅读量1.9k

点赞数 5

文章标签： vue npm node.js nginx

于 2023-08-31 14:54:10 首次发布

本文链接：https://blog.youkuaiyun.com/qq_69073409/article/details/132602935

版权

安装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>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- main.js中vue3指定的容器 -->
    <script type="module" src="/src/main.js"></script>
    <!-- 指定的入口函数 -->
  </body>
</html>

myvue.vue

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

myvue.vue

<script setup>
//   此处可以导入组件、函数等
import {ref} from 'vue'
const messge=ref('hello')
// vue3 中创建一个内容基本都用ref
    </script>
    <template>
     <!-- 此处是结构部分，相当于html可以编写标签,如<h1></h1> <div></div> -->
<div>{{messge}}</div>
    </template>
    <style scoped>
/* 此处是样式设计区域，相当于css */
    </style>

更改一下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