这是我参与8月更文挑战的第16天，活动详情查看：8月更文挑战
前言
本次教学是关于vue+element+axios+webpack的集成前端框架如何由0开始慢慢搭建成成熟完整的服务，可以说学了这一个，任何的vue相关框架都可以拿下了。
一、准备
- node.js环境
- cnpm 或者 npm的淘宝镜像
- vue-cli 脚手架构建工具
- webpack
1.安装node.js
从node官网 nodejs.org/en/ 下载安装包，下载后一键安装即可。
node -v查看node的版本，检验是否安装完成。
2.安装npm
先执行npm -v查看版本，一般安装node成功就会自动安装npm。
在使用npm取下载依赖时，因为要翻墙到国外去下载，很慢也可能失败，
所以很多时候都需要把镜像换成国内taobao的镜像，下载依赖包会更快些。
或者使用cnpm来安装依赖包，sudo npm install cnpm i -g。
3.安装vue脚手架
安装命令： sudo npm install -g @vue/cli 检查其版本是否正确： vue --version。
4.webapck
sudo npm install webpack -g
以上命令执行的时候，如果报错了，就先在前面加个 sudo，很多情况都是权限不足导致的。
5.xcode开发工具
一般开发工具我都是用xcode，还是挺方便的，也可以装很多插件。
二、已有项目
一般已有项目，就直接在开发工具中打开，打开后想要直接运行一般是不可能的，需要先安装所需的依赖包，在package.json这个文件中，都是需要安装的依赖包，进入该项目目录下，执行 cnpm i，或者将镜像换成taobao，执行npm i。
下载需要一些时间，等待下载完成，再执行 npm run dev。
如果出现
Project is running at http://localhost:8090/
- Local http://localhost:8090
- Network 192.168.xx.xx:8090 这样就是成功啦。
三、新建项目
进入到一个专门放项目的目录下，执行命令 ：vue init webpack vue_test
回车后会出现一系列有关项目配置的问题，如下
? Project name 「设置项目名称」
? Project description A Vue project 【项目描述】
? Author xxxx <xxxx@xxx.com> 【项目作者，或自动获取本地github账号】
? Vue build standalone 【打包方式，默认就行】
? Install vue-router? Yes 【安装 vue-router】
? Use ESLint to lint your code? No 【限制代码风格，否】
? Set up unit tests Yes 【是否安装单元测试】
? Pick a test runner jest
? Setup e2e tests with Nightwatch? No 【是否用e2e做行为模拟测试】
? Should we run `npm install` for you after the project has been created? (recommended) npm 【是否让程序自动执行 npm install】
构建完成后，cd vue_test,执行 npm run dev，启动服务。
