004-云E办项目介绍

一、项目介绍
二、搭建环境
- 1、环境准备
- - 1.配置默认安装目录和缓存日志目录
  - 2.安装 Node.js 淘宝镜像加速器（cnpm ）
- 3、安装vue及脚手架
- - 1.安装vue.js
  - 2.安装webpack模板
  - 3.安装脚手架vue-cli 2.x
  - 4.安装路由
- 4、可以看到我的安装目录如下:
三、创建项目
- 1、创建项目
- 2、启动项目:
四、项目结构
- 1、vue-cli目录
- 2、Public目录
- 3、src目录

一、项目介绍

本项目目的是实现中小型企业的在线办公系统，云E办在线办公系统的是一个用来管理日常的办公事务的一个系统，他能够管的内容有：日常的各种流程审批，新闻，通知，公告，文件信息，财务，人事，费用，资产，行政，项目，移动办公等等。它的作用就是通过软件的方式，方便管理，更加简单，更加扁平。更加高效，更加规范，能够提高整体的管理运营水平。
本项目在技术方面采用最主流的前后端分离开发模式，使用业界最流行、社区非常活跃的开源框架Vue 来构建前端端，旨在实现云E办在线办公系统。包括职位管理、职称管理、部门管理、员工管理、工资管理、在线聊天等模块。项目中还会使用业界主流的第三方组件扩展大家的知识面和技能池。
项目搭建：Vue-cli
状态管理：VueX
路由：VueRouter
UI ：ElementUI
通信：Axios
前段语法：ES6
打包：Webpack
通信：WebSocket
字体：font-awesome
文件下载上传：js-file-download
在线聊天：vue-chat

二、搭建环境

1、环境准备

安装node.js
下载地址：http://nodejs.cn/download/current/

由于Node.js 中默认安装了 npm，所以不用额外配置就能在全局命令中使用 npm命令，在cmd中测试一下是否安装成功了：输入 node -v 与 npm –v分别查看版本信息

说明：这里的环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，之所以要配置，是因为以后在执行类似：npm install express [-g] （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中，占C盘空间，当然如果你不介意，可以省略这一设置
————————————————
版权声明：本文为CSDN博主「袁小萌同学」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/dream_summer/article/details/108867317

1、自己创建安装目录

比如，我希望将全模块所在路径和缓存路径，放在我node.js安装的文件夹中，则在我安装的文件夹【"D:\Program Files \nodejs】下创建两个文件夹【node_global】及【node_cache】分别作为默认安装目录和缓存日志目录。

2、执行命令，将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录：

npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"可以查看是否成功：
npm config get prefix 查看npm全局安装包保存路径
npm config get cache  查看npm装包缓存路径

2.安装 Node.js 淘宝镜像加速器（cnpm ）

验证方式：cnpm config get registry 或 cnpm config list
官方：npm install cnpm -g （太慢了，所以用下面的淘宝镜像）

或者使用如下语句解决 npm 速度慢的问题
永久使用淘宝镜像源：直接修改npm的默认配置
npm install -g cnpm --registry=https://registry.npm.taobao.org

验证：配置后可以根据npm config get registry或 npm config list命令查看npm下载源是否配置成功

3、安装vue及脚手架

1.安装vue.js

npm install vue -g其中-g是全局安装，指安装到global全局目录去

查看安装的vue信息：npm info vue

查看安装的vue版本npm list vue

2.安装webpack模板

在命令行中运行命令npm install webpack -g，然后等待安装完成。

webpack 4x以上，webpack将命令相关的内容都放到了webpack-cli，
所以还需要安装webpack-cli：npm install --global webpack-cli，
安装成功后可使用webpack -v查看版本号。

3.安装脚手架vue-cli 2.x

npm install -g @vue/cli
用这个命令来检查其版本是否正确：vue --version

4.安装路由

安装上vue-router：npm install -g vue-router

4、可以看到我的安装目录如下:

三、创建项目

1、创建项目

1、打开Windows Power Shell(管理员模式运行）

2、确定自己项目所在目录：D:\IdeaProjects\yunEBan
在shell中进入所在目录，并且创建项目：vue create yeb

2、启动项目:

进入项目： cd .\yeb
启动项目： npm run serve

安装并运行成功后在浏览器输入：http://localhost:8080

四、项目结构

1、vue-cli目录

node_modules：用于存放项目的依赖文件
Public:公共目录
src：项目源码目录
.gitignore：git 忽略的配置文件
babel.config.js：Babel 配置文件，主要作用是将 ES6 转换为 ES5
package.json：项目的配置文件
- name：项目名称
- version：项目版本
- description：项目描述
- author：项目作者
- scripts：封装常用命令
- dependencies：生产环境依赖
- devDependencies：开发环境依赖

2、Public目录

favicon.ico:网页图标
index.html:首页，仅作为模板页，实际开发时不使用

3、src目录

src 目录是项目的源码目录，所有代码都会写在这里

004-云E办项目搭建环境相关推荐

002云E办项目之登录模块
如果你没有看第一篇文章,建议你去看一下文章链接好好看每一步你可以知道什么是逆向工程你可以在这里好好学习一下登录模块由于本的sql语句放在001云E办项目创建一. 逆向工程(创建AutoGe ...
云E办项目之部门管理
文章目录云E办---部门管理一.展示所有部门 1. 后台接口及数据格式 2. 使用Element-ui中的Tree树形控件 3. 初始化部门信息二. 添加部门 1. 后台接口及数据格式 2. 使 ...
【Java】云E办项目后端技术栈整合及代码阅读
项目来源:Bilibili:带你从0搭建一个springboot+vue前后端分离的java项目源码地址:https://github.com/Jimecc/yeb 本项目的后端部分我已经完整的部署 ...
【代码阅读】云E办项目后端技术栈总结及源码分析
项目来源:Bilibili:带你从0搭建一个springboot+vue前后端分离的java项目源码地址:https://github.com/Jimecc/yeb 本项目的后端部分我已经完整的部署 ...
亲测可用云e办项目的接口文档21年10月更新
前言一直想开发一个功能比较强大的项目,但是一直没有动手,最近终于有点时间来折腾它了.由于时隔两年没有接触前端了,所以需要一个小项目先练练手感.等这个项目完工之后在着手搞一个大工程.都说好记星不如烂笔 ...
阿里云从零单排搭建环境
一.想使用redis,下载redis,参考 http://www.redis.cn/download.html 下载了redis-5.0.9.tar.gz版本,gcc4.8.5就能用安装完成后,需要 ...
云e办（后端）——项目介绍及搭载项目
云e办项目介绍本项目目的是实现中小型企业的在线办公系统,云E办在线办公系统是一个用来管理日常的办公事务的一个系统,他能够管的内容有:日常的各种流程审批,新闻,通知,公告,文件信息,财务,人事,费用 ...
Fanout交换器-搭建环境
我们讲一下RabbitMQ中的第三种交换器,Fanout交换器,相比上两种我们讲过的交换器,最大的特点它是以广播的模式,来做消息的传递,我们来看一下这样的需求,我这里有一个订单服务,然后还有一个短信服 ...
B站云E办Vue+SpringBoot前后端分离项目——MVC三层架构搭建后台项目
本项目来源B站云E办,笔记整理了项目搭建的过程和涉及的知识点.对于学习来说,不是复制粘贴代码即可,要知其然知其所以然.希望我的笔记能为大家提供思路,也欢迎各位伙伴的指正. 项目前端学习笔记目录 B站云 ...

004-云E办项目搭建环境

004-云E办项目介绍

一、项目介绍

二、搭建环境

1、环境准备

1.配置默认安装目录和缓存日志目录

2.安装 Node.js 淘宝镜像加速器（cnpm ）

3、安装vue及脚手架

1.安装vue.js

2.安装webpack模板

3.安装脚手架vue-cli 2.x

4.安装路由

4、可以看到我的安装目录如下:

三、创建项目

1、创建项目

2、启动项目:

四、项目结构

1、vue-cli目录

2、Public目录

3、src目录

004-云E办项目搭建环境相关推荐

最新文章

热门文章

004-云E办项目搭建环境

004-云E办项目介绍

一、项目介绍

二、搭建环境

1、 环境准备

1.配置默认安装目录和缓存日志目录

2.安装 Node.js 淘宝镜像加速器（cnpm ）

3、安装vue及脚手架

1.安装vue.js

2.安装webpack模板

3.安装脚手架vue-cli 2.x

4.安装路由

4、可以看到我的安装目录如下:

三、创建项目

1、创建项目

2、启动项目:

四、项目结构

1、vue-cli目录

2、Public目录

3、src目录

004-云E办项目搭建环境相关推荐

最新文章

热门文章

1、环境准备