2020 零基础到快速开发 Vue全家桶开发电商管理系统(Element-UI)项目初始化篇

文章目录

        • 1、引言
        • 2、项目初始化
          • 2.1前端项目初始化步骤
        • 3、项目管理
          • 3.1 创建
          • 3.2 创建新项目
          • 3.3 预设
          • 3.4 功能面板
          • 3.5 配置面板
          • 3.6 保存新预设
          • 3.7 安装相关插件(配置 Element-UI 组件库)
          • 3.8 安装新的依赖(配置 axios 库)
        • 4、结束语
        • 点击进入Vue❤学习专栏~

1、引言

寒假是用来反超的!一起来学习Vue把,这篇博客是关于项目初始化,请多指教~

2、项目初始化

2.1前端项目初始化步骤
  • ① 安装 Vue 脚手架
  • ② 通过 Vue 脚手架创建项目
  • ③ 配置 Vue 路由
  • ④ 配置 Element-UI 组件库
  • ⑤ 配置 axios 库
  • ⑥ 初始化 git 远程仓库
  • ⑦ 将本地项目托管到Github或码云中

核心:
本项目初始化对于初学者来说是基于可视化项目管理ui界面,如果你在cmd里面输入

vue ui

如果没有任何反应的话,推荐阅读以下博客解决:
点击跳转—2020 如何进入Vue 可视化项目管理器 UI界面

3、项目管理

3.1 创建

点击创建,然后选择你要创建项目的位置(比如桌面Desktop)然后选择“在此创建新项目”

3.2 创建新项目

2020 零基础到快速开发 Vue全家桶开发电商管理系统(Element-UI)项目初始化篇_第1张图片

3.3 预设

对于我们第一次开发的话,就没有原来的预设,这里我们就手动配置我们的项目了
2020 零基础到快速开发 Vue全家桶开发电商管理系统(Element-UI)项目初始化篇_第2张图片

3.4 功能面板

依次将下面几个功能打开,Linter是为了代码风格格式化,最后那个使用配置文件是很重要的,一定要选上(当然你可以全选上,不过本次开发项目有些不需要)
2020 零基础到快速开发 Vue全家桶开发电商管理系统(Element-UI)项目初始化篇_第3张图片
在这里插入图片描述
在这里插入图片描述
2020 零基础到快速开发 Vue全家桶开发电商管理系统(Element-UI)项目初始化篇_第4张图片

3.5 配置面板

2020 零基础到快速开发 Vue全家桶开发电商管理系统(Element-UI)项目初始化篇_第5张图片

3.6 保存新预设

2020 零基础到快速开发 Vue全家桶开发电商管理系统(Element-UI)项目初始化篇_第6张图片

3.7 安装相关插件(配置 Element-UI 组件库)

进入项目仪表盘,然后点击插件,点击“添加插件”,输入以下内容

vue-cli-plugin-element

2020 零基础到快速开发 Vue全家桶开发电商管理系统(Element-UI)项目初始化篇_第7张图片
选中之后,点击右下角安装按钮即可

  • 接着,就是我们对element进行插件配置,如下图:
    对这个插件按需导入,否则会冗余
    2020 零基础到快速开发 Vue全家桶开发电商管理系统(Element-UI)项目初始化篇_第8张图片
3.8 安装新的依赖(配置 axios 库)

返回之前的界面,我们选择依赖,然后输入axios,注意我们这里选的是运行依赖

2020 零基础到快速开发 Vue全家桶开发电商管理系统(Element-UI)项目初始化篇_第9张图片

4、结束语

到此,我们Vue项目初始化就结束了,下篇博客将接着写关于如何托管项目到github或者码云上。


最后,看完本篇博客后,觉得挺有帮助的话,可以继续查看专栏其它内容嗷,一起来学习Vue吧~
在这里插入图片描述

点击进入Vue❤学习专栏~

学如逆水行舟,不进则退

你可能感兴趣的:(Vue全家桶系列,项目管理,可视化,react,github,vue)