保姆级Node后端服务+MongoDB数据库+vue前端+Linux部署 -- 前端工程开发本系列准备环境请查看http

本系列准备环境请查看juejin.cn/post/712315…

前端工程使用vite+vue3搭建开发。

开始操作

通过vscode打开之前准备的frontAndBack目录，在终端中通过pnpm和vite生成vue前端项目模板文件

pnpm create vite frontEnd -- --template vue

询问项目名时，直接回车使用frontEnd作为项目名。如下：

生成模板完成时，下方会提示我们依次进入目录、安装依赖并启动

  cd frontEnd
  pnpm install
  pnpm run dev

在浏览器中打开显示的地址：http://127.0.0.1:5173/，显示如下：

看到中间的count按钮，点击后，后方的数字会累加。

目录说明

此时在frontEnd目录内容为

.
├── README.md
├── index.html
├── node_modules(省略)
├── package.json
├── pnpm-lock.yaml
├── public
│   └── vite.svg
├── src
│   ├── App.vue
│   ├── assets
│   │   └── vue.svg
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.js
│   └── style.css
└── vite.config.js

package.json - 项目说明文件，读项目的入口，关注"scripts"字段

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },

当我们执行npm run dev时，start会匹配scripts中的字段，对应的命令则为vite。通过npm run dev实际上就执行了vite命令。我们在命令行中使用"Ctrl + C"关闭应用后，再输入vite重启，打开http://127.0.0.1:5173/ 发现效果相同，此时为开发模式。

build命令是打包，也就是把我们当前开发工程打包成静态资源，生成入口为index.html以供访问。执行npm run build,打包完成后会发现frontEnd下多了dist文件夹，这些都是用来部署到服务器的静态资源。

── dist
│   ├── assets
│   │   ├── index.43cf8108.css
│   │   ├── index.77498d93.js
│   │   └── vue.5532db34.svg
│   ├── index.html
│   └── vite.svg

preview命令是预览我们的打包效果，通过本地启动web服务器加载执行build之后的dist文件夹内容。执行npm run preview

打开http://127.0.0.1:4173/ ，会发现和我们刚刚通过npm run dev展示的页面一模一样，这样就可以把dist文件夹上传到服务器，让其他用户访问。

README.md - 项目说明文件

index.html - 开发项目页面入口文件

node_modules - 依赖包文件夹

pnpm-lock.yaml - pnpm安装版本记录文件

public - 静态资源文件，存放图片等

src - 开发项目工程文件，存放.vue, .js, .css等文件

src/main.js - 项目的js入口，通过index.html中的<script type="module" src="/src/main.js"></script>引入加载，完成各种交互开发。

// 引用vue中的createApp
import { createApp } from 'vue'
// 引入样式文件
import './style.css'
// 引入vue的入口文件
import App from './App.vue'
// 通过createApp方法，使用#app选择器，选中index.html中的<div id="app"></div>元素，将App.vue内容放入app标签之中
createApp(App).mount('#app')

启动项目，打开http://127.0.0.1:5173/ 。再通过F12，打开控制面板，选中元素一栏，可以更清楚的看到。

2.src/App.vue - 开发的页面内容入口

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>

用过import引用了HelloWord.vue文件的内容。<template></template>为vue的语法，可包裹原生的html标签元素，编译阶段会抛弃掉。查看<div></div>标签中的内容，便可知道页面显示内容的来源：引用了两张图片和一个HelloWord页面的内容。 3. src/HelloWorld - 被引用的组件内容 4. src/assets - 静态资源，存放图标、图片等 5. src/style.css - 样式表，调整页面样式

vite.config.js - vite工程的配置文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})

启动加载整个vue工程，默认通过index.html作为入口启动项目，很多默认配置并未有显示出，先按下不表。

试一试，在启动项目后，更改HelloWord.vue内`template`中的内容并保存，在http://127.0.0.1:5173/ 中均可看到相应的变化。

Done!

保姆级Node后端服务+MongoDB数据库+vue前端+Linux部署 -- 前端工程开发