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:UsersAdministratorAppDataLocal pm-cacheeresolve-report.txt for a full report. npm ERR! A complete log of this run can be found in: npm ERR! C:UsersAdministratorAppDataLocal pm-cache\_logs2021-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 内容项