vue-element：学习笔记

逃离我推掉我的手 2022-10-21 03:45 99阅读 0赞

链接：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面板）

![20210503162304923.png][]

1.2.5、ESLint + Standard config的配置文件

![20210503162309985.png][]

1.3、配置element-ui插件库

vue-cli-plugin-element

1.4、安装axios依赖

![20210503162315961.png][]

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中（设置全局样式）

![20210503162324872.png][]

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

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

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

[20210503162304923.png]: /images/20221021/aec1625da0164a7683c6a0914dfc16a2.png
[20210503162309985.png]: /images/20221021/f99b1cfc9a1a4197a561d33d436c68f5.png
[20210503162315961.png]: /images/20221021/fc26dd5fe77746a094c3dd2a17e2476c.png
[20210503162324872.png]: /images/20221021/ff563f8d2433421083d406648b8cbb22.png

发表评论取消回复

表情：

评论列表（有 0 条评论，99人围观）

还没有评论，来说两句吧...

相关阅读

相关「学习笔记」学习笔记合集

可以点击 [https://www.cnblogs.com/hongzy/tag/%E7%AC%94%E8%AE%B0/][https_www.cnblogs.com_hong

淩亂°似流年/ 2023年06月05日 12:48/ 0 赞/ 20 阅读

相关学习笔记

学习笔记 !/bin/bash funwithParam() { echo

谁借莪１个温暖的怀抱￠/ 2022年11月26日 12:59/ 0 赞/ 261 阅读

相关学习笔记

\ajax: 1、概念：异步的JavaScript 和 xml 1.1异步和同步：客户端和服务器端相互通信的基础上 \客户端必须等待服务器端的响应。在等待的期间客户

深藏阁楼爱情的钟/ 2022年10月29日 13:24/ 0 赞/ 281 阅读

相关 vueElement之table合并单元格

运用情景：在某些场景需要table表格合并行或者合并列 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0c

不念不忘少年蓝@/ 2022年10月25日 15:27/ 0 赞/ 412 阅读

相关学习笔记

一. CSS 如何实现文字的垂直居中 1. 二.问题记录 1.创建新的JSP页面的时候报错：The superclass “javax.servlet.http.H

超、凢脫俗/ 2022年08月20日 09:30/ 0 赞/ 144 阅读

相关【学习笔记】git学习笔记

使用git的好处可以保存每个版本，只要在每个版本做完后进行上传 ![这里写图片描述][70] 可以异地读取更新

爱被打了一巴掌/ 2022年05月14日 09:10/ 0 赞/ 407 阅读

相关学习笔记

我的第一天学习c\ 1、c\学习网址 [https://docs.microsoft.com/zh-cn/dotnet/csharp/programming-guide

矫情吗；*/ 2022年05月08日 06:16/ 0 赞/ 326 阅读

相关学习笔记

测试 ORM JPA EJB JPQL MOM JMS ORM 对象关系映射英语：Object Relational M

爱被打了一巴掌/ 2022年02月16日 01:57/ 0 赞/ 397 阅读

相关 [笔记] Docker 学习笔记

1. 什么是 Docker > 官方文档：[链接][Link 1]，中文文档：[链接][Link 2] Docker 属于 Linux 容器的一种封装，提供简单易用的容

缺乏、安全感/ 2021年11月27日 02:01/ 0 赞/ 592 阅读

相关学习笔记

1、js如何将136分钟转化为几小时，几分钟 return (Math.floor(minutes/60) + "小时" + (minutes%60) + "分"

爱被打了一巴掌/ 2021年07月25日 23:46/ 0 赞/ 1051 阅读