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/

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

1、自己创建安装目录

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

官方：npm install cnpm -g （太慢了，所以用下面的淘宝镜像）

3、安装vue及脚手架

1.安装vue.js

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

三、创建项目

1、创建项目

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

2、启动项目:

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

四、项目结构

1、vue-cli目录

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

2、Public目录

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

3、src目录

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

• assets :资源目录
• components ：组件目录
• router ：路由目录
• views ：页面目录

文章知识点与官方知识档案匹配，可进一步学习相关知识Vue入门技能树Node.js和npmNode安装与配置22985 人正在系统学习中