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