vue3.0后台管理项目(day1)

123 阅读1分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第7天,点击查看活动详情

Snipaste_2022-09-28_08-38-26.png

最近用vue3.0+vuex+element-plus+echarts+axios+mockjs创建了一个后台管理系统,然后写个笔记来记录下创建过程中遇到的一些问题以及一些处理方法。首先,整体项目的样子如下图所示:

image.png

  1. 首先我们使用vue-cli创建项目,在项目文件夹内按住shift点击右键找到在此处打开powershell窗口,然后在命令行内输入vue create vue-test,create后面的名字自己想取什么就写什么,然后进入项目配置行,样式如下所示:

image.png

  • 这里我们先选择最后一个Manually select features,意思为手动选择功能,由我们自己配置
  • 回车选择完之后我们选择Babel,Router,Vuex,CSS预处理器,空格选择然后回车,如下图所示:

image.png

  • 然后选择vue3.x版本
  • 然后是使用history路由还是哈希路由,我们选择Y
  • 然后是选择css预处理器,我们选择sass.
  • 然后选择Id dedicated config files
  • 最后一个是询问是否需要保存这次的配置使他成为默认配置,方便下次直接配置使用,我们选择N
  • 然后稍等一会我们的项目就在创建中
  • 创建完成之后我们需要cd vue-test,进入到项目的目录中去,然后输入命令:yarn serve,就可以看到我们的项目跑在本地的8080端口,然后复制这个链接输入到浏览器,就可以看到我们初始化的vue3.0的项目了。