vue官网:https://cn.vuejs.org/
下面将搭建一个最基本的vue3项目,包含 vue3、ts、pinia、element-plus、scss、api-proxy 等配置。
步骤如下:
1. 按脚手架初始化项目
进入vue官网的快速上手,按照官网所述,执行:npm create vue@latest,然后,按照提示选择 typescript / vue-router / pinia(如下图)
注释:如果不选择pinia,初始化的项目里就默认没有状态管理库,然后就只能自己去配置 vuex 或 pinia 了。
初始化后,项目的目录如下图所示(含pinia)
初始化之后,可以执行最后的几个指令,运行项目看看效果(如下图)。
2. 配置proxy
在vite.config.ts文件中配置server选项
接口拦截公共配置
接口配置
页面请求接口
3. 引入UI库,如 element-plus
(1)进入element-plus官网:https://element-plus.org/zh-CN/
(2)执行指南里的安装指令:npm install element-plus --save
(3)根据指南里的“快速开始”的描述,配置 element-plus,如下
在main.ts文件中添加
(4)就可以往项目里添加element-plus的组件了。
当然,还可以根据指南配置其他的选项,如国际化、主题等。
4. 引入scss
(1)安装node-sass: npm install node-sass --save-dev
(2)全局文件处理:在main.ts文件中引入:import '@/styles/global.scss',
文件中引入其他scss文件如下
(3)局部文件处理: 组件文件中,在style标签上添加 lang="scss"