通用管理后台项目笔记 1 - Vue3+Vite安装环境

概述

从0打造通用的后台管理系统,系列的第一篇博客,开发环境Node+Yarn+Vite的开发环境,这是记录的学习笔记。

Node环境

本地使用的是Node v18.18.2,npm v9.8.1,安装脚手架工具,npm、cnpm、yarn3种方式,如果你安装的是旧版本的vue-cli,需要提前卸载,npm uninstall vue-cli -gyarn global remove vue-cli,然后从新安装@vue/cli,这里我使用的是yarn。

sql 复制代码
npm install @vue/cli -g
cnpm install @vue/cli -g
yarn global add @vue/cli

使用vue --version,目前4.x以上版本支持创建Vue3项目,vue-cli官方中文文档https://cli.vuejs.org/zh/guide/

使用vite创建项目

官方文档 cn.vitejs.dev

node v18+使用创建项目命令 yarn create vite,在输入项目名称和选项,交互的界面非常友好,如下图:

其他版本的创建项目的命令:

kotlin 复制代码
npm init @vitejs/app

cnpm init @vitejs/app 

yarn create @vitejs/app manager-fe

创建成功后,执行命令:

bash 复制代码
cd stark
yarn
yarn dev

安装项目所需的依赖

csharp 复制代码
# 安装项目生产依赖
yarn add vue-router@next vuex@next element-plus axios -S
# 安装项目开发依赖
yarn add sass -D

在应用市场里,VsCode 安装需要的插件:

复制代码
Eslint
Vetur
TypeScript
Prettier

配置vite中的server配置,官方文档https://cn.vitejs.dev/config/

vbnet 复制代码
server:{
host:"localhost",
port:8080
}

可以在项目入口的main.js,打印获取环境变量,如果想更改配置文件在根目录package.json,修改scripts,加入--mode dev,更详细的参考官方文档https://cn.vitejs.dev/guide/env-and-mode.html

json 复制代码
  "scripts": {
    "dev": "vite --mode dev",
    "build": "vite build",
    "preview": "vite preview"
  },
arduino 复制代码
console.log("环境变量=>",import.meta.env);

至此,环境搭建完成了,可以开始开发项目代码了。

相关推荐
用户21411832636022 分钟前
dify案例分享-免费玩转即梦 4.0 多图生成!Dify 工作流从搭建到使用全攻略,附案例效果
前端
CodeSheep2 分钟前
稚晖君又开始摇人了,有点猛啊!
前端·后端·程序员
JarvanMo4 分钟前
Flutter Web vs Mobile:主要区别以及如何调整你的UI
前端
IT_陈寒24 分钟前
Java性能优化:从这8个关键指标开始,让你的应用提速50%
前端·人工智能·后端
天生我材必有用_吴用26 分钟前
Vue3+Node.js 实现大文件上传:断点续传、秒传、分片上传完整教程(含源码)
前端
摸鱼的春哥42 分钟前
前端程序员最讨厌的10件事
前端·javascript·后端
牧羊狼的狼5 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手6 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲6 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell7 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器