环境安装
-
node 安装
windows下官网下载exe安装
检测是否安装成功
node -v
npm -v -
webpack
使用npm安装,npm install webpack -g -
vue-cli3 脚手架
指定安装cli3不安装4
如果之前安装过vue-cli2的,要先卸载 npm uninstall vue-cli -g
安装vue-cli3系列的最高版本
npm install -g @vue/[email protected] -
创建项目 命令行 执行 vue ui 在web页面中进行项目的初始化
安装完成后很简单的一个结构
入口中加载了APP.vue的组件
这里面引入了一个helloworld的组件并展示
这是一个默认地址,我们需要根据路由配置我们自己的地址,因此需要配置vue的路由功能
vue-router安装
重新npm install
添加路由的配置,新建一个router ,并新建index.js里面引入路由模块,并添加路由的配置,当访问/login的时候,展示Login.vue里面的内容,类似于后端的get请求的display视图。
需要在入口文件中加载路由模块,
需要把固定死的页面结构改为使用路由
编写login.vue
测试登录页面 http://localhost:8081/#/login
一定要把login放在最后,不能是 http://localhost:8081/login 这样子敲回车得到的地址是:
http://localhost:8081/login#/ 是无法匹配路由的。
配置网络请求
安装网络请求库
-
npm install axios
-
新建网络请求相关的js文件
-
配置接口地址,根目录下新建js文件
-
后台接口
-
js代码请求
注意打印不要直接使用console.log,
效果图