当前使用前后端分离框架实施的项目越来越多,前后端分离技术实施项目可以是项目成员分工愈发明确,开发效率更高,由于后台微服务框架普及与高效,前后端分离技术将成为主流软件框架。本文使用VUE+Webpack搭建前端项目,UI框架选用ElementUI技术,当然也可以选用其他成熟的UI框架。
安装NodeJS
从中文NodeJS站点下载
http://nodejs.cn/download/
或者从云盘下载
链接:https://pan.baidu.com/s/10nNi2TWrtdcLP2zwcKf84A
提取码:tb7c
设置NPM国内镜像
npm config set registry https://registry.npm.taobao.org npm info underscore
安装Webpack
npm install -g webpack
安装Vue-Cli
npm install -g @vue/cli
创建vue+webpack项目
在本地计算机C:盘创建目录 C:/vue
启动命令行,将当前目录转移到C:/vue目录下
执行vue init webpack gfvue
提示首先运行 npm install -g @vue/cli-init
重新执行vue init webpack gfvue
这些交互问题,都可以键入回车键结束
创建项目过程,如果网络慢,可能需要比较长的时间,大概20分钟。
将目录转移到gfvue
cd c:/vue/gfvue
执行
npm run dev
通过浏览器执行http://localhost:8080
VUE前端项目目录结构
引入其他组件
使用编辑器打开c:/vue/gfvue/package.json文件,添加其他组件
"area-data": "^5.0.6",
"axios": "^0.18.0",
"echarts": "^4.1.0",
"element-ui": "^2.3.8",
"js-cookie": "^2.2.0",
"lodash": "^4.17.10",
"mockjs": "^1.0.1-beta3",
"moment": "^2.24.0",
"nprogress": "^0.2.0",
"vue": "^2.5.2",
"vue-area-linkage": "^5.1.0",
"vue-i18n": "^7.3.2",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
mockjs
生成随机数据,拦截 Ajax 请求。
area-data
行政区域地址
echarts
图表组件
element-ui
前端UI框架
js-cookie
JS操作Cookie组件
lodash
Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单
moment
非常实用的日期工具类
nprogress
顶部进度条
vue
vue类库
vue-area-linkage
省市区联动选择
vue-i18n
前端国际化
vue-router
vue路由
vuex
Vue.js 应用程序开发的状态管理模式
使用命令安装这些组件
npm install