VUE Webpack搭建前端项目框架

当前使用前后端分离框架实施的项目越来越多，前后端分离技术实施项目可以是项目成员分工愈发明确，开发效率更高，由于后台微服务框架普及与高效，前后端分离技术将成为主流软件框架。本文使用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
在这里插入图片描述

陈岐祥

发布了189 篇原创文章 · 获赞 34 · 访问量 7万+

私信关注