今天来带大家从0开始搭建一个vue3版本的后台管理系统,之后会补搭建好的模板git仓库地址 一、环境准备 node v16.14.2 pnpm 8.0.0 二、初始化项目文件 本项目使用vite进行构建,vite官方中文文档参考:cn.vitejs.dev/guide/ 如未安装pnpm(自由选择,博主使用pnpm) npm i -g pnpm 项目初始化命令pnpm: pnpm create...
2、install 3、新建packages目录,把src目录、vite.config.js和index.html移到packages文件夹下改名main,然后在packages下创建api目录, 4、在main、api目录下分别pnpm init -f生成package.json name分别为:@momovue/main、@momovue/api 如果想添加公共框架包直接在根目录执行pnpm install module_name 4、api项目单独...
{"compilerOptions": {"composite":true,"module": "esnext","moduleResolution": "node"},"include": ["vite.config.ts","http-proxy.ts"] } #Vite 安装好 pnpm 之后,我们就可以配合使用 vite 初始化项目 pnpm create vite _app-name_ -- --template vue-ts 英文官网:https://vitejs.dev/ 早在一...
不过,目前我们可以直接使用以下命令通过Vite创建一个Vue+TS的项目: bash pnpm create vite@latest 在提示符中选择vue-ts作为模板。这将创建一个包含Vue3和TypeScript支持的Vite项目。 3. 在项目中集成Vite构建工具 实际上,在上一步中,我们已经通过Vite模板创建了项目,所以Vite构建工具已经集成好了。你可以在项目...
一、vite安装 npm 二、pnpm 构建motorepo 1、添加pnpm-workspace.yaml文件,内容如下: 2、install 3、新建packages目录 4、在main、api目录下分别pnpm init -f生成package.json 5、api项目单独添加框架,并且添加index.ts测试文件 6、main安装api依赖 7、测试调用api的方法 ...
1、全局安装 vue-cli $ npm install --global vue-cli 1. 2、创建一个基于 webpack 模板的新项目 $ vue init webpack my-project 1. 3、安装依赖,走你 $ cd my-project $ npm install $ npm run dev 1. 2. 3. 如果npm安装慢的话 可以使用淘宝镜像 ...
一、初始化项目pnpm create vite koa2-ssr-vue3-ts-pinia -- --template vue-ts 复制代码 集成基本配置 由于本文的重点在于 SSR 配置 ,为了优化读者的观感体验,所以项目的 基本配置 就不做详细介绍,在我上一篇文章《手把手教你用 vite+vue3+ts+pinia+vueuse 打造企业级前端项目》[8] 中已详细介绍,大家可...
一:新建vue3项目 运行如下命令: pnpm create vite 模板选择vue、vue-ts 二:配置依赖包 修改项目根目录的package.json的scripts和devDependencies如下 "scripts":{"dev":"vite","build":"vue-tsc --noEmit && vite build","preview":"vite preview","lint:eslint":"eslint --fix --ext .js,.ts,.vue,...
pnpm新建vite+vue3项目 以及pnpm和npm的区别 构建前需要安装以下配置 Node环境npm环境 安装pnpm npm install -g pnpm 设置镜像源 pnpm config set registry https://registry.npm.taobao.org/# 检查pnpm config get registry 配置pnpm环境 在终端运行pnpm create vite (项目名称) ...
Vue3采用了和vite一致的选择,开发阶段使用 esbuild 作为构建工具,在生产阶段采用 rollup 进行打包。 我们先安装一些依赖: # 源码采用 typescript 编写pnpm add -D -w typescript# 构建工具,命令行参数解析工具pnpm add -D -w esbuild rollup rollup-plugin-typescript2 @rollup/plugin-json @rollup/plugin-node...