Bootstrap

vue学习总结

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

;