数字化管理平台

Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus

权限系统-商城

个人博客地址

一、环境配置

1. 1. 开发环境：Vite3+ Vue3
   

兼容性：Vite 需要 Node.js版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

Vue3 采用组合式 API

1. 2. 官方推荐的 IDE 配置： Visual Studio Code
   
2. 3. Vite 搭建脚手架：
   执行如下命令初始化项目

npm init vue@latest

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：

 Project name: … Add TypeScript? … No / Yes  Add JSX Support? … No / Yes  Add Vue Router for Single Page Application development? … No / Yes  Add Pinia for state management? … No / Yes  Add Vitest for Unit testing? … No / Yes  Add Cypress for both Unit and End-to-End testing? … No / Yes  Add ESLint for code quality? … No / Yes  Add Prettier for code formatting? … No / Yes  Scaffolding project in ./... Done.

如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

cdnpm install npm run dev

注：也可以采用 vite 官方命令配置 vue 项目：

npm init vite@latest # or npm create vite@latest

安装 sass 预处理语言：

npm install --save-dev sass

二、脚手架目录介绍

public 下面的不会被编译 可以存放静态资源

assets 下面可以存放可编译的静态资源

components 下面用来存放我们的组件

router 存放路由相关文件

stores 存放状态管理相关文件

App.vue 是全局组件

main.js 全局的 js 文件

index.html 非常重要的入口文件 （Vite 的入口文件是一个 html 文件，他刚开始不会编译这些 js 文件 只有当你用到的时候 如script src=“xxxxx.js” 会发起一个请求被vite拦截这时候才会解析js文件）

vite.config.js 这是vite的配置文件具体配置项 后面会详解

三、SFC 语法规范解析

*.vue 件都由三种类型的顶层语法块所组成：