Midway-Vue3框架使用笔记

前提准备

框架地址: Midway-Vue3-SSR

基于 Midway、Vue 3 组装的 SSR 框架
简单、易学易用、方便扩展、集成Midway框架，您一直想要的Vue SSR 框架。

使用系统：Windows

安装:

# 克隆项目
git clone https://github.com/lqsong/midway-vue3-ssr.git

# 进入项目目录
cd midway-vue3-ssr

# 复制文件
copy src/config/config.default.ts  src/config/config.local.ts # 启用或修改里面的参数
copy src/config/config.default.ts  src/config/config.prod.ts # 启用或修改里面的参数
copy web/.env.development  web/.env.development.local # 启用或修改里面的参数

# 全局安装pnpm：
npm install pnpm -g

# 安装环境依赖
pnpm i 

# 启动默认项目
pnpm dev

设置源:

# 查看源
pnpm config get registry 
# 切换淘宝源
pnpm config set registry http://registry.npm.taobao.org 

pnpm安装好后，有安装yarn的也可以用yarn，不过有的指令用不了

操作

vscode打开克隆下来的项目，ctrl+tab打开终端，前提准备 进入项目目录里后的操作也可也在这里完成。

创建总的文件夹

初始化后，创建projpath_name文件夹来存放多个工程项目

# 创建
mkdir projpath_name
# 进入
cd projpath_name

创建工程项目

进入projpath_name创建项目，

• 执行pnpm create vite@latest回车，输入项目名称aaa选择对应的框架和模块;
• 执行pnpm create vue@latest回车，输入项目名称aaa选择需要的模块;

创建完cd aaa进入工程项目文件夹pnpm i安装项目依赖项，完成后执行pnpm run dev启动项目，

附：cd projpath_name后如果已经创建好了有多个项目可lsordir查看。

报错记录，创建项目pnpm i安装项目依赖项后, vite-env.d.ts和main.ts内容报红，
原因:扩展插件ESlint冲突了，我是测试后才发现，在构建项目上有个选项

√ 是否引入 ESLint 用于代码质量检测？ ... 否 / 是

而我原来在VsCode中就安装了插件ESlint，操作卸载掉ESlint和Vue - Official后重装Vue - Official再次创建项目就没有问题了。

单独卸载ESlint，保留Vue - Official，import App from './App.vue'行依旧会报错。在vite-env.d.ts引入:

declare module "*.vue" {
    import {  defineComponent } from "vue";
    const component: ReturnType<typeof defineComponent> & {
        install(app: App): void;
    };
    export default component;
  }

关于vite

vite与webpack都是前端构建工具，只不过vite类似于项目懒加载，速度更快。

命令nmp create vite@latest

#创建项目
<!-- pnpm create vite aaa --template vue-ts 舍弃-->

PS D:\Bepic_H5\midway-vue3-ssr> pnpm create vite@latest
../../.pnpm-store/v3/tmp/dlx-18316       | Progress: resolved 1, reuse../../.pnpm-store/v3/tmp/dlx-18316       |   +1 +
../../.pnpm-store/v3/tmp/dlx-18316       | Progress: resolved 1, reuse../../.pnpm-store/v3/tmp/dlx-18316       | Progress: resolved 1, reused 1, downloaded 0, added 1, done
√ Project name: ... test0
√ Select a framework: » Vue
√ Select a variant: » JavaScript

Scaffolding project in D:\Bepic_H5\midway-vue3-ssr\test0...

Done. Now run:

  cd test0
  pnpm install
  pnpm run dev