通用管理后台项目笔记 1 - Vue3+Vite安装环境
原创通用管理后台项目笔记 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 -g 或 yarn global remove vue-cli,然后从新安装@vue/cli,这里我使用的是yarn。
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创建项目
node v18+使用创建项目命令 yarn create vite,在输入项目名称和选项，交互的界面非常友好，如下图：
其他版本的创建项目的命令：
npm init @vitejs/app
cnpm init @vitejs/app
yarn create @vitejs/app manager-fe创建成功后，执行命令：
cd stark
yarn
yarn dev
安装项目所需的依赖
# 安装项目生产依赖
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/
server:{
host:"localhost",
port:8080
}可以在项目入口的main.js,打印获取环境变量,如果想更改配置文件在根目录package.json,修改scripts，加入--mode dev,更详细的参考官方文档https://cn.vitejs.dev/guide/env-and-mode.html
"scripts": {
"dev": "vite --mode dev",
"build": "vite build",
"preview": "vite preview"
},console.log("环境变量=>",import.meta.env);
至此，环境搭建完成了，可以开始开发项目代码了。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。