koa+Vite+vue3+ts+pinia构建项目

最新推荐文章于 2024-04-23 09:35:43 发布

sintina

最新推荐文章于 2024-04-23 09:35:43 发布

阅读量655

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/WaterSprite_ct/article/details/129426168

版权

一、初始化构建项目

npm create vite myProject -- --template vue-ts

注：Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

二、创建服务器

使用 Koa2

1. 安装koa

npm i koa --save && npm i @types/koa --save-dev

2. 安装中间件（koa-connect）

npm i koa-connect --save

3. 安装koa处理跨域（koa2-cors）

npm i koa2-cors --save

4. 安装中间件（koa-bodyparser）

利用koa-bodyparser来处理POST请求参数

npm i koa-bodyparser --save

POST请求参数的处理有2种方式：

利用node.js原生的querystring.parse()方式拿到前端传过来的数据。
利用第三方中间件koa-bodyparser

注：

本模块不支持解析multipart表单格式数据，请使用co-busboy解析multipart表单格式数据。
middleware的顺序很重要，这个koa-bodyparser必须在router之前被注册到app对象上

5. 注册中间件

新增bin/app.js文件

const Koa = require('koa');

const cors = require('koa2-cors')

const bodyParser = require('koa-bodyparser')

(async () => {
    const app = new Koa();
    app.use(cors())
    app.use(bodyParser())

    app.use(async (ctx, next) => {
      console.log(ctx)
        ctx.body = `<!DOCTYPE html>
      <html lang="en">
        <head><title>koa2 + vite + ts + vue3 + vue-router</title></head>
        <body>
          <h1 style="text-align: center;">Hello</h1>
        </body>
      </html>`;
    });
    
    // parse request body:

    app.listen(9000, () => {
        console.log('server is listening in 9000');
    });
})();

6. node进行启动服务

node bin/app.js

三、安装模板引擎

npm i nunjucks --save

nunjucks文档：Nunjucks 中文文档

廖雪峰nunjucks文档：使用Nunjucks - 廖雪峰的官方网站

创建config/templates.js

const nunjucks = require('nunjucks');

function createEnv(path, opts) {
  var autoescape = opts.autoescape === undefined ? true : opts.autoescape,
    noCache = opts.noCache || false,
    watch = opts.watch || false,
    throwOnUndefined = opts.throwOnUndefined || false,
    env = new nunjucks.Environment(
      new nunjucks.FileSystemLoader(path, {
        noCache: noCache,
        watch: watch,
      }),
      {
        autoescape: autoescape,
        throwOnUndefined: throwOnUndefined,
      }
    );
  if (opts.filters) {
    for (var f in opts.filters) {
      env.addFilter(f, opts.filters[f]);
    }
  }
  retu