前端框架说明手册(内部培训材料)
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目录下创建模块文件夹,之后属于该模块的组件文件都在此目录下建立,方便管理,比如我们创建测试模块