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

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

检查环境

2. 项目搭建

新建一个文件，并将控制台跳转到该路径之下。然后进行项目搭建

项目配置

安装完成后就会在该文件夹下生成一个名为management的vue项目文件 。

对应各个项目文件用途

|-- build            // 项目构建(webpack)相关代码
|-- config           // 项目开发环境配置
|-- src           // 源码目录
|-- static            // 静态文件，比如一些图片，json数据等
|-- .babelrc           // ES6语法编译配置
|-- .editorconfig      // 定义代码格式
|-- .gitignore        // git上传需要忽略的文件格式
|-- README.md       // 项目说明
|-- favicon.ico
|-- index.html      // 入口页面
|-- package.json    // 项目基本信息

安装完成后。可对src源码文件进行调整，添加相关文件夹。

进入文件夹：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使用：


使用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 /

解决：可能性一：改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报错

可能是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