分类： 前端技术文档

整   理：晋 哲

时   间：2017-06-29

说   明：介绍脚手架搭建生成的各个文件功能，以及在实际项目中使用

一、vue-cli脚手架搭建之后的文件介绍及应用
1、build -- 开发配置文件夹，一般情况下安装时自动添加，通常不用改动
webpack.base.conf.js -- webpack配置文件

2、config文件夹
这里主要需要注意这几点的设置，正式运行环境下assetsPublicPath的路径设置需要改动为【./】

3、package.json -- 记录项目基本信息
4、index.html -- vue生成html的默认head代码部分，需要调整
5、README.md -- 一些执行命令的说明，方便查看使用

6、src -- vue代码存放的主要路径
（1）api -- 封装的api调用方式
使用如下：

注：sys_name和store_id已默认，不用传

（2）assets -- 静态文件存放，比如css、js、image、font等等
（3）common -- 存放一些封装的公共方法，比如alertMes、弹出框等等
（4）router -- 路由设置

（5）App.vue -- 主体组件
组件内容在里显示，公共样式可以在这里引入

（6）main.js -- 入口文件，主要作用是初始化vue实例并使用需要的插件

（7）components -- 组件的存放位置
一个主体的集合组件，拼接各个模块的子组件

子组件常用代码结构

二、引用ElementUI组件
1、安装

npm i element-ui -S

2、main.js里引入Element

3、组件里使用
比如“消息提示”组件的使用
this.$message('请输入商品名称')

具体各组件的使用方式查看官方文档
http://element.eleme.io/#/zh-CN/component/installation

三、引用vue插件
举例：vue-awesome-swiper插件
1、安装

npm install vue-awesome-swiper --save

2、main.js里引入插件

3、组件里使用

整   理：晋 哲

时   间：2017-04-10

说   明：vue+cli脚手架默认搭建的是单页面应用，在实际项目中需要优化配置生成多页面。

设置步骤：
一、修改src文件结构
图一为脚手架默认生成的src结构

图二为调整后的文件结构，新建module文件夹，将每个页面都对应一个同名的文件夹

比如：login文件夹里的三个文件是由原先的App.vue、main.js、index.html整合到一个文件夹内进行修改，welcome文件夹就是再复制一份修改

二、修改build内的文件配置
主要是调整webpack中html-webpack-plugin插件的默认设置，这是用来将js和html对应起来的插件
调整三处js文件，如下图：

1、webpack.base.conf.js
（1）在头部添加下面两行代码

var glob = require('glob'); // 引入glob工具
var entries = getEntry('./src/module/**/*.js'); // 获得入口js文件

（2）再将entry的配置修改为entries

（3）在底部添加getEntry方法，用于匹配路径

function getEntry(globPath) {
  var entries = {},
    basename, tmp, pathname;

  glob.sync(globPath).forEach(function (entry) {
    basename = path.basename(entry, path.extname(entry));
    tmp = entry.split('/').splice(-3);
    pathname = tmp.splice(0, 1) + '/' + basename; // 正确输出js和html的路径
    entries[pathname] = entry;
  });
  return entries;
}

2、webpack.dev.conf.js
（1）在头部添加下面两行代码，引入path和glob工具

// 引入path和glob工具
var path = require('path');
var glob = require('glob');

（2）将HtmlWebpackPlugin默认设置注释掉

（3）在底部也添加getEntry方法，并添加自定义HtmlWebpackPlugin插件的配置

function getEntry(globPath) {
  var entries = {},
    basename, tmp, pathname;

  glob.sync(globPath).forEach(function(entry) {
    basename = path.basename(entry, path.extname(entry));
    tmp = entry.split('/').splice(-3);
    pathname = tmp.splice(0, 1) + '/' + basename; // 正确输出js和html的路径
    entries[pathname] = entry;
  });
  return entries;
}

// 自定义HtmlWebpackPlugin插件配置
var pages = getEntry('./src/module/**/*.html');
for (var pathname in pages) {
  // 配置生成的html文件，定义路径等
  var conf = {
    filename: pathname + '.html',
    template: pages[pathname], // 模板路径
    minify: { //传递 html-minifier 选项给 minify 输出
      removeComments: true
    },
    inject: 'body', // js插入位置
    chunks: [pathname, "vendor", "manifest"] // 每个html引用的js模块，也可以在这里加上vendor等公用模块
  };
  // 需要生成几个html文件，就配置几个HtmlWebpackPlugin对象
  module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}

3、webpack.prod.conf.js
和上一个文件webpack.dev.conf.js中做类似的处理，先注释掉原来的HtmlWebpackPlugin，然后在下面添加函数，通过迭代插入多个HtmlWebpackPlugin。

三、最终生成的文件会打包进对应的文件夹内
对比默认生成文件结构与修改后生成文件

整   理：晋 哲

时   间：2017-03-30

说   明：安装脚手架，编译生成最终用于实际项目的压缩文件

1、确认已经安装node环境和npm包管理工具，建议将 npm 的注册表源设置为国内的镜像，可以大幅提升安装速度。

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

2、安装 vue

3、全局安装 vue-cli

4、创建一个基于 webpack 模板的新项目

5、安装依赖
$ cd my-project
$ npm install

6、实时运行项目，会自动打开一个浏览器窗口，默认访问localhost:8080
$ npm run dev

（2）如果是在测试机249上安装，则默认的localhost:8080访问不了，需要修改build/dev-server.js文件里的uri

最终访问：http://192.168.0.249:8080

7、开发版本用于实际项目中，编译vue文件，在dist文件夹内最终生成压缩版html、js、css。
$ npm run build

整   理：晋 哲

时   间：2017-02-23

说   明：介绍<picture>和<details>HTML5新标签的实用用法

一、响应式显示图像
在<picture>标签里会先识别<source>里的路径，当满足media条件时显示srcset里的图片，当不满足条件则显示<img>里的图片。

<picture>
    <source srcset="images/pic2_1.png, images/pic2_2.png 2x"
            media="(min-width: 200px) and (max-width:320px)">
    <img src="images/pic1_1.png" srcset="images/pic1_2.png 2x, images/pic1_3.png 3x" />
</picture>

1、<source>元素用于创建可替换的图像文件；

2、media属性：用来包含想要展示的特性，比如视口的当前高度(viewport height)，宽度(width)，方向(orientation)等；

3、srcset属性：与相应的图像文件名相匹配，进行加载。如果需要提供不同的像素密度，可以添加多个的文件名到srcset属性中。

提示：可以放置多个<source>标签，以指定不同的图像文件名，进而根据不同的条件进行加载。
兼容性：

二、显示或隐藏下拉菜单
在<details>标签里会默认先隐藏<summary>标签以外的html内容，点击<summary>标签内容则显示出来，形成下拉效果。

<details>
    <summary>Click me</summary>
    <dl>
        <dd>list1</dd>
        <dd>list2</dd>
        <dd>list3</dd>
    </dl>
</details>

提示：请与<details>标签一起使用。<summary>标题是可见的，当用户点击标题时会显示出详细信息。
注释："summary"元素应该是"details"元素的第一个子元素。
兼容性：