内容发布更新时间 : 2024/12/27 2:16:32星期一 下面是文章的全部内容请认真阅读。

前端框架说明手册（内部培训材料）

1 准备 1.1 基础知识

详见vue2官网，http://cn.vuejs.org

1.2 环境搭建

1.2.1 内网环境

Step1: 准备已经下载好的Node.js安装包（按照不同的系统，下载不同的安装文件），安装后

使用 node -v /npm -v 查看node和npm 的版本，如果npm版本低于3.4建议安 装最新版本的node.js 运行环境。 Step2: 解压项目模板文件

Step3: 进入client文件夹，解压已准备好的node_modules文件到当前目录 Step4：npm install Step5：npm run dev 1.2.2 外网环境

Step1: 下载Node.js安装包（按照不同的系统，下载不同的安装文件），安装后 使用 node -v /npm -v 查看node和npm 的版本，如果npm版本低于3.4建议安 装最新版本的node.js 运行环境。 Step2:

(1)在cmd中进入项目client文件夹，

(2)执行命令： npm config set registry https://registry.npm.taobao.org

(3)执行命令 npm config list 观察下载源是否更换为国内镜像源（加快下载速度）

(4)执行 npm install 等待所有包安装完成

(5)如果单个的包需要安装，请执行 npm install packageName --save Step3:npm run dev

1.2 项目结构介绍

开发人员主要关注的目录： src、static、services下的moduleServices.js、router.config.js

其中，build:

Config:

src是开发的主要目录。

static是项目静态文件的放置目录、moduleServices.js主要是配置服务, router.config.js配置路由.

2 入门

2.1 Hello world （标题模块没有子模块的情况下）

一开始，页面是空的：如图

以编写hello world为例，分为以下几个步骤：

2.1.1创建当前模块的文件夹

在src/modules目录下创建模块文件夹，之后属于该模块的组件文件都在此目录下建立，方便管理，比如我们创建测试模块