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/

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

1、自己创建安装目录

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

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

3、安装vue及脚手架

1.安装vue.js

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

查看安装的vue版本npm list vue

三、创建项目

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：项目描述
- author：项目作者
- scripts：封装常用命令
- dependencies：生产环境依赖
- devDependencies：开发环境依赖

2、Public目录

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

3、src目录

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

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

来源：BigTree的学习之路

声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！

004-云E办项目搭建环境