vue3+elementplus+ts搭建权限管理系统--1

*****************此文仅用于个人记录学习vite创建vue3项目过程，请勿转载或转发******************

开发环境搭建 

1、安装Node.js

进入Node.js官网Node.js官网，下载符合系统的软件包

下载后直接双击安装包安装即可，安装完成后，运行npm -v或者node -v显示node或npm版本号，即安装成功

2、安装VSCode

直接官网下载对应的安装包安装即可

3、创建vue项目

使用vite来创建demo-test项目

通过yarn创建项目，如果没有yarn，可以先通过npm安装yarn

通过yarn创建demo-test的vue项目

根据提示启动项目

输入http://localhost:5173/显示效果如下

通过vscode打开项目，目录结构如下

4、安装vue router

在项目根路径下使用yarn安装vue router

安装完毕后可以在项目的package.json文件中查看到vue-router的版本

5、创建项目页面

5.1 在src下创建views文件夹，然后创建两个页面Home.vue和About.vue

5.2 在src下创建router文件夹，用于管理路由相关内容，在router文件夹下创建index.js

5.3 修改APP.vue

将以前的代码都注释或者删掉，然后改成下面的样子

5.4 在main.js中引入router文件并挂载到项目实例上

页面运行效果如下：

6、安装Vuex

6.1 用yarn安装vuex

在package.json中出现vuex的版本号

6.2 创建store文件夹进行状态管理

新建store文件夹，在store文件夹下创建index.js文件，设置一个计数值count，初始值为0，并通过mutations的increase方法改变该值

6.2.1在main.js中引入store

6.2.2 修改Home.vue和About.vue，使用上面的计数值

页面展示效果

Home页

About页

7、安装Element-plus

通过yarn add element-plus来安装

安装成功，在package.json文件中可以看到element-plus的版本号

7.1 自动引入Element plus

自动引入可以减少常用的引用，使开发者关注代码

安装unplugin-vue-components和unplugin-auto-import作为开发依赖

安装成功后在package.json中可以看到这两个依赖

修改vite.config.js，配置自动引入

这样模板中可以直接使用Element组件标签了，在脚本中页无须引入

测试是否不需要引入，在App.vue中写入如下代码

页面展示效果

还可以配置vue，vue-router,vuex，vue-i18n

这样在Home.vue和About.vue文件中都去掉import

页面展示效果跟之前引入一样，说明自动引入配置正确。

8、引入Element Plus图标集

全局引入并全局注册所有图标组件，这样可以在全局范围内使用图标

修改main.js引入图标并全局注册图标组件

在App.vue中添加edit图标验证是否引入正确

页面展示如下：

9、安装CSS预处理器Sass

通过yarn安装Sass

package.json中出现sass的版本信息

对Home.vue中的count进行sass验证

lang="scss"表明是scss，如果不加则表示是css

页面展示如下：