今天来带大家从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项目单独...
pnpm add vue-router 在src下创建文件夹router=>index.ts import { createRouter, createWebHashHistory } from "vue-router"; const routes = [ { path: "/", redirect: "/home", }, { path: "/home", name: "Home", component: () => import("@/views/Home/index.vue"), // children: [ ...
const env= loadEnv(mode, process.cwd(), '');return{//自定义公共基础路径(取自 .env(.*) 文件)base: env.VITE_BASE_PATH,//定义全局常量替换方式define: {//取消启用Vue.2x中选项式api(这部分不会被打包)'__VUE_OPTIONS_API__':false, },//配置vite插件plugins: [ vue(), vueJSX(),//自动...
1、在cmd命令输入pnpm create vite 你的项目名,如下: 2、键盘上下键选择vue项: 3、enter键选择vue-ts项: 4、enter键,自此创建完毕: 5、使用pnpm i 安装vue3-ts项目所依赖的包: 6、在使用pnpm dev运行项目: 7、浏览器打开:http://localhost:3000,得到如下: ...
运行项目 现在,你可以运行项目了: bash pnpm install pnpm run dev 这将启动Vite开发服务器,你可以在浏览器中打开http://localhost:5000(或Vite输出的其他地址)来查看你的Vue3+Vite+TypeScript项目。 希望这能帮助你成功搭建一个使用pnpm、Vue3、Vite和TypeScript的项目!
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 (项目名称) ...
重复一下上面的步骤,然后我们去引用一个button组件,发现报错了Failed to resolve import "./base" from "../libc-ui/src/components/typography/title.vue". Does the file exist? vite.config.js 中添加extensions即可解决,配置一下省略的扩展名列表
pnpm create vite my-vue-app -- --template vue 二、pnpm 构建motorepo 1、添加pnpm-workspace.yaml文件,内容如下: packages: -'packages/**' 2、install 3、新建packages目录 把src目录、vite.config.js和index.html移到packages文件夹下改名main,然后在packages下创建api目录 ...
前两篇文章分享了基于 vite3 vue3 的组件库基础工程vue3-component-library-archetype和用于快速创建该工程的工具yyg-cli,但在中大型的企业级项目中,通常会自主搭建这些脚手架或加速器。优雅哥希望每位前端伙伴能知其所以然,故接下来的文章将进入Vue3 企业级优雅实战系列,整个系列将包括五大部分: ...