脚手架
使用vite脚手架进行创建
全局安装vite
//全局安装vite脚手架命令
$npm init vite -g
//查看是否安装成功
$vite -v
//安装成功会显示版本号
vite/4.0.3 darwin-x64 node-v16.13.1
创建项目
执行完$npm i vite命令后进入如下界面:
Project name:输入项目名称
选择使用的框架:这里选择vue
接下来选择语言模式:这里使用TS
一个名为basics-3的项目创建完成了,接下来进入项目内部安装所需的依赖
安装依赖
$npm i
依赖安装完成后使用 npm run dev运行,成功后如下
点击连接进入服务器页面如下:
文件目录如下:
详细介绍:
|- vue3-admin-app # 项目名称
|- node_modules # 项目依赖包
|- public
favicon.ico # 网页图标
|- src # 写代码的主场
|- assets # 资源文件
base.css # 基础样式
logo.svg # logo
main.css # 项目样式
|- components # 自定义组件
|- icons # 图标组件
HelloWorld.vue # 自定义组件
TheWelcome.vue # 自定义组件
welcomeItem.vue # 自定义组件
|-router # 路由文件夹
index.ts # 路由配置
|- stores # 状态管理器文件夹
counter.ts # 状态管理器模块
|- views # 项目页面组件
AboutView.vue # 页面
HomeView.vue # 页面
App.vue # 项目跟组件
main.ts # 项目入口文件
.eslintrc.cjs # 代码格式化说明
.gitignore # git上传忽略文件
.prettierrc.json # 格式化配置
env.d.ts # 环境配置声明文件 - ts 中
index.html # 页面模版
package.json # 项目依赖说明以及运行命令
README.md # 说明文档
tsconfig.config.json # ts的配置文件说明 - 本项目部分
tsconfig.json # ts的配置文件说明 - 公共部分
vite.config.ts # vite的配置文件