创建vue项目

1.创建项目

$ npm init @vitejs/app

2. 启动项目

$ cd vite-project
$ npm install
$ npm run dev

3. 可以访问项目了。
   目前这个项目自由一个页面app.vue这个页面是引入了helloworld.vue这个组件，并且向这个组件中注入数据。helloworld.vue中引入了defineprosp属性来接收父组件传递过来的值。
4. 做一个认证系统
   需要路由来跳转。

创建express

（1）方法二

$ yarn init -y \\初始化json
$ yarn add express \\安装express包

这个方法不是用express建立的项目，需要自己一点点搭建项目。
（2）官方教程
安装 Express - Express 中文文档 | Express 中文网 (expressjs.com.cn)

这个方法也非常的不错。

安装nodemon实现网站修改后自动启动

（1）安装nodemon

$ yarn add nodemon

然后再package.json文件中加入

{
  "name": "2pro",
  "version": "1.0.0",
  "main": "index.js",
//加入的内容
  "scripts": {
    "start": "node app",
    "dev": "nodemon app"
  },
//
  "license": "MIT"
}

启动服务器

$ yarn run dev

修改npm run build 路径

修改vite.config.js文件为：

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build:{
    outDir:'./server/dist'
  }
})

参考资料为：

vite.config.js常用配置

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

// https://vitejs.dev/config/
export default defineConfig({
    // 要用到的插件数组
      plugins: [vue()],
      // 开发或生产环境服务的公共基础路径,可以是/foo/、https://foo.com/、空字符串或./(用于开发环境) 几种类型，这个选项也可以通过命令行参数指定（例：vite build --base=/my/public/path/）
      base: './',
      // 静态资源服务的文件夹, 默认"public"
      publicDir: 'public',
      css: {
          postcss: {
              plugins: [
                  require('autoprefixer')
              ]
          }
      },
      server: {
          // 服务器主机名，如果允许外部访问，可设置为"0.0.0.0"
          host: '0.0.0.0',
          // 服务器端口号
          port: 3000,
          // boolean | string 启动项目时自动在浏览器打开应用程序；如果为string，比如"/index.html"，会打开http://localhost:3000/index.html
          open: false,
          // 自定义代理规则
          proxy: {
              '/api': {
                  target: 'http://jsonplaceholder.typicode.com',
                  changeOrigin: true,
                  rewrite: (path) => path.replace(/^\/api/, '')
              }
          }
      },
      build: {
          // 指定输出路径，默认'dist'
          outDir: 'dist',
          // 指定生成静态资源的存放路径(相对于build.outDir)
          assetsDir: 'assets',
          // 小于此阈值的导入或引用资源将内联为base64编码，设置为0可禁用此项。默认4096（4kb）
          assetsInlineLimit: '4096',
          // 启用/禁用CSS代码拆分，如果禁用，整个项目的所有CSS将被提取到一个CSS文件中,默认true
          cssCodeSplit: true,
          // 构建后是否生成source map文件，默认false
          sourcemap: false,
          // 为true时，会生成manifest.json文件，用于后端集成
          manifest: false
      }
})