Vue+element管理后台（Vuex，axios，Sass，Element-ui，eCharts）

「爱情、让人受尽委屈。」 2021-10-06 02:28 353阅读 0赞

## **1. 搭建环境** ##

环境条件（由命令行工具搭建）：

（1）node（npm在安装完node后就有了）
     	 		安装node地址：https://nodejs.org/en/
     	 		安装淘宝镜像（cnpm）：npm install -g cnpm --registry=https://registry.npm.taobao.org
    	（2）webpack（全局安装）
    	 		指令：npm install -g webpack
    	（3）vue-cli（脚手架全局安装）
    			指令：npm install vue-cli -g

检查环境  
![在这里插入图片描述][20191203104148470.png]

## **2. 项目搭建** ##

新建一个文件，并将控制台跳转到该路径之下。然后进行项目搭建  
![使用命令进行安装][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxODE5MQ_size_16_color_FFFFFF_t_70]  
项目配置  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxODE5MQ_size_16_color_FFFFFF_t_70 1]  
安装完成后就会在该文件夹下生成一个名为management的vue项目文件 。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxODE5MQ_size_16_color_FFFFFF_t_70 2]  
对应各个项目文件用途

安装完成后。可对src源码文件进行调整，添加相关文件夹。  
![static放不会变动的文件 assets放可能会变动的文件][static_ assets]

进入文件夹：cd management（项目名称）
    执行操作：npm run dev

在浏览器访问 http://localhost:8081 。项目这时候已经搭建运行完成啦

## **3. 插件安装** ##

插件（Vuex，axios，Sass，Element-ui，eCharts）。 推荐大家使用淘宝镜像（cnpm）安装插件，因为npm网络不好会受到影响。**Ctrl+C** 两次可结束当前操作重新出现命令行

**（1）vuex+axios**

cnpm install                                   //安装依赖
    cnpm install vuex --save
    cnpm install axios --save-dev

vuex使用：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxODE5MQ_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxODE5MQ_size_16_color_FFFFFF_t_70 4]  
使用this.$ s t o r e . s t a t e 访 问 数 据 ， t h i s . store.state访问数据，this. store.state访问数据，this.$store.commit触发muations中的方法

**（2）sass**

cnpm install node-sass --save-dev          //sass-loader依赖于node-sass
    cnpm  install sass-loader --save-dev

需要使用时给style标签添加 \*\*lang=“scss”\*\*就可使用了。

**（3）element-ui**

cnpm i element-ui -S

**（4）echarts**

cnpm install echarts -S

安装完成后再main.js文件中添加

import echarts from 'echarts'
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI);
    Vue.prototype.$echarts = echarts

## **4. 运行问题** ##

**（1）npm run dev页面展示Cannot GET /**  
![在这里插入图片描述][20190916204544764.png]  
解决：可能性一：改config/index.js 里面的assetsPublicPath:’./’ 去掉点  
可能性二：webpack-dev-server文件中contentBase:path.resolve(\_\_dirname,“dist”)  
从新运行或者重新打开一个窗口。

**（2）npm run dev 错误提示：babylon**

{ parser: “babylon” } is deprecated; we now treat it as { parser: “babel” }

解决：npm i prettier@~1.12.0，之后再重新dev。

**（3）使用sass报错**  
![在这里插入图片描述][20191216101910895.png]  
可能是sass-loader版本过高。可以在package.json查看版本。把"sass-loader": “^8.0.0”，更换成了 “sass-loader”: " ^7.3.1"。

重新安装：

npm uninstall sass-loader（卸载当前版本）
    npm install sass-loader@7.3.1 --save-dev

[20191203104148470.png]: /images/20211006/f92bc0028bc348dca72b937ea018d914.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxODE5MQ_size_16_color_FFFFFF_t_70]: /images/20211006/bac91f233402446c8382ba642bf88896.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxODE5MQ_size_16_color_FFFFFF_t_70 1]: /images/20211006/a85e81aca02b484bb02d4459edd22fcc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxODE5MQ_size_16_color_FFFFFF_t_70 2]: /images/20211006/b47c0fc5589341f6870d6da41cbe052f.png
[static_ assets]: /images/20211006/d21de88dc0fe406d885666d6e376ed98.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxODE5MQ_size_16_color_FFFFFF_t_70 3]: /images/20211006/d5bc6db344774003a3c6833cef03ffe5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxODE5MQ_size_16_color_FFFFFF_t_70 4]: /images/20211006/c93cec5266ba435da0abd215ff3b0179.png
[20190916204544764.png]: /images/20211006/e945eb929ca845caaf63c2238db05f34.png
[20191216101910895.png]: /images/20211006/b1e736451cfe4355a9aae02eea55a0bc.png