vue-element-admin:
1.api下面的业务模块js文件对应view文件的页面
2.components文件夹里放公共组件
3.strore存储,登录token用户信息,全局个人偏好设置等
4.webpack是用vue-cli的webpack-template为基础模板构建的(可以配置jquery)
5.alias:别名 例:alias 指向src目录下,再使用相对路径找文件
6.vscode安装eslint插件可以自我修正
7.封装axios
import axios from ‘axios’
// 创建axios实例
const service = axios.create({
baseURL: process.env.BASE_API, // api的base_url
timeout: 5000 // 请求超时时间
})
创建的这个service变量可以管理拦截
8多环境配置,
2种解决跨域:1.全是用 cors来解决 2.dev环境也可以通过 webpack-dev-server的proxy来解决,开发环境用nginx反代理一下
9.前后端可通过swagger交互,iconfont阿里矢量图
10.权限:前端会有一份路由表,它表示了每一个路由可访问的权限。当用户登录之后,通过 token 获取用户的 role ,动态根据用户的 role 算出其对应有权限的路由,再通过router.addRoutes动态挂载路由。
vue项目配置elementui
可以按照官方方法使用npm i element-ui -S命令进行安装
在main.js配置3行,且要在最前面
1.import ElementUI from ‘element-ui’ //vue项目配置ElementUI
2.import ‘element-ui/lib/theme-chalk/index.css’
3.Vue.use(ElementUI);
传参:
this.$router.push({ name: ‘news’, params: { userId: 123 }})
接收参数:
this.$route.params.userId
查询参数:注意:和name配对的是params,和path配对的是query
this.$router.push({ path: ‘/news’, query: { userId: 123 }});
===================================================
声明式导航传参:
命名路由传参
click to new page
查询参数
click to news page
node:internal/modules/cjs/loader:936 throw err; ^ Error: Cannot find module ‘@vue/cli-plugin-babel‘
错误背景描述,在网上通过gitee下载了一个项目,执行npm run serve 时报错
在网上搜了一下说是执行:
npm install babel-plugin-import -D (可以解决)
我试了一下并不管用
解决方法:
1.删除当前项目的node_modules 文件
2.再执行 cnpm install 即可
Error: Cannot find module ‘chalk’
Require stack:
- D:\Projects\yiyi\electron-vue-admin.electron-vue\dev-runner.js
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
提示其实比较清晰,缺少“chalk”模块,安装就行了
于是:npm install chalk