通过vue-cli创建项目,安装依赖,配置路由与组件,启动开发服务器,完成Vue项目搭建全过程。
1、 指令
2、 掌握命令行工具前,需先了解其基本命令的含义与操作方法。
3、 -g 是 --global 的简写形式。
4、 -v 是 --version 的简短写法。
5、 -S 是 --save 的缩写形式
6、 -D 为 --dev 的缩写形式
7、 cd xxx 表示切换到本地计算机中的 xxx 目录。
8、 包管理工具
9、 包管理器种类繁多
10、 npm
11、 稍等,选择安装方式
12、 此处采用的是 yarn 工具
13、 安装 Vue CLI 工具到全局环境
14、 先搭好脚手架
15、 检查安装是否完成
16、 看到版本信息即表示安装成功
17、 前往目标位置安放项目
18、 进入目标文件夹
19、 项目初始化启动
20、 进入项目目录
21、 安装所需依赖组件
22、 启动项目运行
23、 浏览器访问该地址即完成搭建
24、 项目架构布局
25、 下图为项目结构树的解析图
26、 使用vue-cli创建的项目仅提供基础框架,不包含任何额外插件,需根据需求自行安装所需组件。
27、 安装 Vuex 状态管理工具
28、 如需状态管理功能,请安装对应的状态管理工具。
29、 安装用户界面组件
30、 安装饿了么UI框架,适用于PC端,使用命令 cnpm install element-ui --save 进行下载并保存到依赖中。
31、 安装 iview UI 框架,可通过命令 cnpm install iview --save 实现,各类框架按需选用其一即可。
32、 选用合适的UI组件进行安装与使用
33、 安装HTTP请求插件以支持网络通信
34、 众多 HTTP 插件中,我们选用 axios 作为解决方案。
