vue-element-pro
简介
Vue-element-pro 是一个集成后台操作界面交互的基础前端框架
基于Vue.js 和 Element-ui。
作为前后端分离的WEB项目的前端部分，需要额外制作供前端调用的后端API接口
官方手册链接
- Vue.js: https://cn.vuejs.org/v2/guide/
- Element-ui: http://element-cn.eleme.io/#/zh-CN/component/installation
项目安装说明
安装依赖
npm install
开发环境（本地运行 & 热更新）
npm run serve
生产环境（打包压缩静态文件）
npm run build
项目构成步骤及说明
由于开发环境需要Node.js，安装 node 和 npm
vue-cli 3 需要 Node.js 8.9 或更高版本。
推荐使用最新稳定版，目前最新 node v11.0.0 ; npm v6.7.0
安装 Vue CLI 3
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，是搭建vue项目的脚手架工具
npm install -g @vue/cli
使用Vue CLI 创建vue项目
/* [web_framework] 填写你所需要创建的项目名 */
vue create [web_framework]
配置选项
比默认增加了 vue-router 和 vuex 两个组件 [详见截图]
使用history模式
其余都是默认选项
最后可以选择是否保存这次配置，然后回车开始初始化项目
此时已经构建出一个vue项目，进入项目目录运行
npm run serve就可以看已经可以通过浏览器上访问这个本地项目了
安装 vue-cli 的 element-ui 插件
vue add element
分别安装要用到的插件
- axios：基于promise用于浏览器和node.js的http库，用于http请求
npm install axios --save
- qs: 是一个增加了一些安全性的查询字符串解析和序列化字符串的库，用于url参数的解析
npm install qs --save
- vue-ls: 封装localstorage浏览器本地储存
npm install vue-ls --save
项目目录结构
dist: 生产环境的编译打包压缩后的静态文件存放的目录，默认是'dist'，可以修改配置文件vue.config.js中的 outputDir来更换其他的目录
public: 这个目录是公共文件目录，在编译生产环境时，除了index.html会被改写（增加脚本和压缩代码），其他的文件都会被原样复制进dist目录
src: 所有的源代码所在目录
.eslintrc.js: eslint的配置
babel.config.js: babel的配置
package.json: node项目配置（项目说明、可执行脚本、依赖）
vue.config.js: vue项目配置，配置项详见 vue.config.js 说明文档