【Vue3 第二章】脚手架搭建

数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
权限系统-商城
个人博客地址

一、环境配置

1. 开发环境：Vite3+ Vue3

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

2. 官方推荐的 IDE 配置： Visual Studio Code

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。在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

   cd 
   npm 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 件都由三种类型的顶层语法块所组成：