一、准备工作

1.安装node.js

1.1npm指令详解

-g: 全局
--save:保存
--dev:开发环境

使用国内的淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

2.安装webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

npm install webpack -g

3、安装 vue-cli

安装 vue 脚手架项目初始化工具 vue

npm install vue-cli -g

二、初始化项目

1.创建一个项目

D:\project_vue>vue init webpack myEle

示例图

目录结构

  myEle\
  ├─ build\
  │  ├─ build.js
  │  ├─ check-versions.js
  │  ├─ logo.png
  │  ├─ utils.js
  │  ├─ vue-loader.conf.js
  │  ├─ webpack.base.conf.js
  │  ├─ webpack.dev.conf.js
  │  └─ webpack.prod.conf.js
  ├─ config\                 --配置目录
  │  ├─ dev.env.js
  │  ├─ index.js
  │  └─ prod.env.js
  ├─ src\
  │  ├─ assets\         
  │  │  └─ logo.png
  │  ├─ components\         --自定义组件
  │  │  └─ HelloWorld.vue
  │  ├─ router\             --vue-router 路由配置
  │  │  └─ index.js
  │  ├─ App.vue             --应用入口
  │  └─ main.js             --主入口js
  ├─ static\
  │  └─ .gitkeep
  ├─ .babelrc
  ├─ .editorconfig
  ├─ .gitignore
  ├─ .postcssrc.js
  ├─ index.html
  ├─ package-lock.json
  ├─ package.json           --模块包,cnpm i安装node_modulues
  └─ README.md

2.安装必要的模板组件

2.1安装vuex

应用状态管理库

cnpm install vuex --save

2.2安装axios

axios 是一个基于 Promise 用于浏览器和 nodejs 的 HTTP 客户端，我们后续需要用来发送 http 请求

cnpm install axios --save

2.3安装mockjs

为了模拟后台接口提供页面需要的数据，我们引入 Mock.js 为我们提供模拟数据，而不用依赖于后台接口的完成。

cnpm install mockjs --save-dev

2.4安装 SCSS

入门教程:传送门

cnpm install sass-loader node-sass --save-dev

2.4.1添加配置

在build文件夹下的webpack.base.conf.js的 rules 标签下添加配置。

{
    test: /\.scss$/,
    loaders: ['style', 'css', 'sass']
}

2.4.2如何使用

在页面代码 style 标签中把 lang 设置成 scss 即可

2.5安装element-ui

饿了么提供的UI框架

npm i element-ui -S

安装完后会在根目录的package.json下看到这些模块依赖

 "dependencies": {
    "axios": "^0.18.0",
    "element-ui": "^2.4.11",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    ...
    "mockjs": "^1.0.1-beta3",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    ...
  }

三、开始整合

1.整合Element-UI

项目导入
按照安装指南，在 main.js 中引入 element，引入之后，main.js 内容如下：

mian

然后随便去Element-UI官网复制个按钮过来

tpl

启动npm start,效果图如下,成功

html

2.页面路由

2.1添加页面

pages

2.2添加路由

route

本人的host为：http://localhost:8080/#/

访问路径
- fu:{host}/fu
- me:{host}/me
- ck:{host}/ck

3.利用Mock模拟请求

3.1添加mock

mock

3.2模拟请求

mock-axios

模拟成功

mock-getmenu

注意:

1.Mock并没有发起真正的http请求,所以你在发起axios请求是必须的uri格式

    //必须加上http://localhost:8080 不然会报错
    axios.get('http://localhost:8080/menu.json').then(res=>{
        alert(JSON.stringify(res.data));
    });

2.尽量使用ES6的新特性,例如axios中的Promise.所以后续的变量与常量尽量使用
let与const,并使用箭头函数=>
这个教程我觉得很好:你需要了解的 ES6 语法
当然你也可以去看详细点的:阮一峰Es6教程

1.从头搭建vue-element