Vue
1、Vue脚手架环境准备
- 安装NodeJS，并配置相关设置
- 安装vuecli工具
2、Vue创建
图形化界面
- 新建文件夹cmd进入命令符窗口
- 在CMD中输入 vue ui，会自动调出Vue的图形化界面
- 点击在此创建项目，选择填写相关配置（包管理器：npm）
- 模板创建选择手动
Vue项目目录结构
项目运行
修改Vue项目端口（vue.config.js）
3、Vue项目开发流程
Vue的组件（template\script\style）
- template相当于HTML部分，script就是js部分，style就是css的样式
在Vue项目的开发中，其实main.js以及index.html很少会去操作，主要修改的都是.vue文件
Element
定义Vue组件（内容可复制官方文档）
views目录下新建目录（element）：
默认显示根组件（App.vue）中的内容，所以要想显示其它组件，需要在根组件中进行设置：在template中定义element-view标签，下方的import语句就会自动导入
Vue中使用Axios
Vue路由
前端路由
URL中的hash指的是#号后面的部分，如下图hash为/dept：
Vue Router
定义路由配置信息（index.js）
如果你要访问的是/emp路径，那么你要导入的就是EmpView.vue组件，/dept同理：
案例：通过Vue的路由VueRouter完成左侧菜单栏点击切换效果
示例代码：
根组件添加对应标签
Bug：默认访问路由路径为/
| 问题：由于默认的访问路由路径为/，但我们在index.js中配置的路径只有两个，并不存在/，那么怎么解决这个问题呢？如果你访问/是找不到对应的组件的 |
|---|
| 解决办法：很简单！没有就加上 |
打包部署
如何打包？
效果展示：
打包后的文件：
如何部署？（Nginx）
①、将 dist 目录下的文件复制到 nginx 安装目录
②、启动nginx.exe
查错过程：
Ⅰ、查看 80 端口的占用情况：
Ⅱ、检查任务管理器
Ⅲ、更换 nginx 的端口号
config目录 -> nginx.conf：
找到默认端口，将其改为90：
Ⅳ、访问项目
