xinguan-vue
0000
- 搭建Vue架子
- cmd的vue ui启动,创建项目,运行即可生成node_modules信息
0101
-
在login.vue登录界面
- 1、添加背景色(青绿色)
- 2、添加居中白色方形图案
- 3、添加剧中头像(此处仅动图)
- 4、添加输入框
- 5、添加登录和重置按钮
- 6、添加验证码(此处仅动图)
-
Element
-
npm的方式安装
npm i element-ui -S
-
放入全部组件,实现方法:在main.js中加入
-
import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
-
-
less-loader
-
需要添加less-loader,否则会报错:
Failed to resolve loader: less-loader;You may need to install it.
-
项目中想使用less进行进行样式编辑:
<style lang="less" scoped>
-
需要在终点命令:
npm install -D less-loader@7.x
-
-
less-loader错误解决
-
添加版本不符时:
-
正常添加终点命令:
npm install --save-dev less-loader less
-
如果这样报错的话,是版本问题,需要在上一条命令后追加
--legacy-peer-deps
-
npm install --save-dev less-loader less --legacy-peer-deps
-
npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: vol.vue3@0.1.0 npm ERR! Found: vue@3.2.20 npm ERR! node_modules/vue npm ERR! vue@"^3.0.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer vue@"^2.5.17" from element-ui@2.15.6 npm ERR! node_modules/element-ui npm ERR! element-ui@"*" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See C:\Users\Administrator\AppData\Local\npm-cache\eresolve-report.txt for a full report. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Administrator\AppData\Local\npm-cache\_logs\2021-10-11T06_27_44_908Z-debug.log
-
-
仍然错误时
-
报错:
error in .ciews/Main.vue?vue&type=style&index=0&id=c1f1971a&lang=less&scoped=true&
-
报错:
Syntax Error: TypeError: this.getOptions is not a function
-
进入
package.json
文件中,找到less-loader
和less
版本,相差过多 -
// 卸载 npm uninstall --save less-loader // 安装 npm install -D less-loader@7.x
-
-
-
app.vue
<router-link to="/login">Login</router-link>
-
index.js
-
{ path: '/login', name: 'Login', component: () => import(/* webpackChunkName: "about" */ '../views/Login.vue') }
-
0102
删除无关代码
-
直接删文件
- home.vue
- about.vue
-
删除代码
-
app.vue
-
<template> <div id="app"> <router-view/> </div> </template> <style> </style>
-
-
router/index.js
-
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ { path: '/', redirect: '/login', //重定向到/login }, { path: '/login', name: 'Login', component: () => import('../views/Login.vue') } ] const router = new VueRouter({ routes }) export default router
-
-
0202
- el-menu 主菜单
- el-submenu 子菜单
- el-menu-item 内容项