vue-element：学习笔记

链接：https://pan.baidu.com/s/1EySJFMD7iYzZiMgKFP6B5g 
提取码：4lfj 
复制这段内容后打开百度网盘手机App，操作更方便哦

 

准备工作

1、接口项目地址：https://gitee.com/wBekvam/vueShop-api-server

启动项目

​ 安装依赖： npm install

​ 启动项目 ：node app.js

如何引入idea：https://blog.csdn.net/qq_16946803/article/details/112221600

 

1. 接口api文档：https://gitee.com/wBekvam/vue-shop-admin/blob/master/api

接口文档.md： http://127.0.0.1:8888/api/private/v1/

3、Vue前端demo：https://gitee.com/wBekvam/vue-shop-admin

 

 

• 环境搭建

1.1、搭建vue脚手架

https://www.jianshu.com/p/1ee1c410dc67

 

1.2、通过vue脚手架创建项目

https://segmentfault.com/a/1190000015366009

1.2.1、cmd→vue ui  

1.2.1.1、执行命令、升级cnpm i -g @vue/cli

1.2.1.2、cmd中输入vue ui不起作用：

https://www.cnblogs.com/dyha/p/13869209.html

1.2.1.3、360浏览器会出现白屏

1.2.2、init project

1.2.3、手动

1.2.4、babel，router，linter/formatter，使用配置文件（添加了才有dashboard的ui面板）

 

1.2.5、ESLint + Standard config的配置文件

 

1.3、配置element-ui插件库

vue-cli-plugin-element

 

 

 

1.4、安装axios依赖

 

1.5启动项目

npm install

npm run dev

1.6、如果报没有dev，可以先查看package.json文件，如果真的没有执行以下命令：

vue init webpack

1.7、报错：contains both .browserslistrc and package.json with browsers

删除项目中的browsercraigslist文件，重新运行

 

二、登录页面

 

2.1、组件、路由、App.vue

2.2、全局css等样式要引入到main.js中（设置全局样式）

 

2.3、★使用组件（定义路由）

2.3.1、创建一个组件login.vue，

2.3.2、在路由中引入组件router/index.js中添加login.vue组件