vue外卖一：vue-cli搭建项目、编码测试、打包发布项目、矢量图标、stylus、分析结构、矢量字体图标、render es6写法、dos建文件/夹、reset.css、移动端头部、0.3s延迟

一、使用 vue-cli(脚手架)搭建项目

Vue-cli是 vue 官方提供的用于搭建基于 vue+webpack+es6 项目的脚手架工具
在线文档: https://github.com/vuejs/vue-cli
https://docs.qq.com/pdf/DSEdmZVVZWlV4amJP

3) 操作:

npm install -g vue-cli
vue init webpack gshop
cd gshop
npm install
npm run dev #具体在package.json里查看或修改此命令

访问: localhost:8080

配置自动打开浏览器config/index.js

打开config/index.js，把1处原false改为true即可

// Various Dev Server settings
    host: 'localhost', // 
    port: 8080, // 运行端口，可改
    autoOpenBrowser: true, //【1】自动在浏览器打开

二、编码测试与打包发布项目

1) 编码测试

npm run dev

访问: http://localhost:8080
编码, 自动编译打包(HMR), 查看效果

2) 打包发布

npm run build
npm install -g serve
serve dist

访问: http://localhost:5000

三、相关资源-目录设计创建-stylus包安装

0.矢量字体图标

icoMoon 官网： https://icomoon.io
阿里巴巴矢量库： http://www.iconfont.cn

1.项目目录设计及功能

在这里插入图片描述

2.创建目录命令及文件

进入src目录用命令创建8个文件夹：

F:gshop-clientsrc> mkdir api common components filte
rs mock pages router store

创建含空格的文件夹（文件名加个双引号即可）：mkdir "test demo1"

新建两个文件

App.vue
main.js

3.stylus stylus-loader安装指定版本

这里安装指定版本，否则可能报错
stylus:将代码转化为css
-loader：让webpack理解stylus

cnpm install stylus@0.54.5 stylus-loader@3.0.2 --save-dev

卸载

npm uninstall stylus stylus-loader

页面内联样式写法

<style lang="stylus" rel="stylesheet/stylus">
</style>

实际写一个styl文件

src/common/stylus/common.styl

$green = #02a774;
$yellow = #F5A100;
$bc = #e4e4e4;

// 一像素下边框
bottom-border-1px($color)
	position relative
	border none
	&:after
	content ''
	position absolute
	left 0
	bottom 0
	width 100%
	height 1px
	background-color $color
	transform scaleY(0.5)

// 一像素上边框
top-border-1px($color)
	position relative
	&::before
	content ''
	position absolute
	z-index 200
	left 0
	top 0
	width 100%
	height 1px
	background-color $color

//根据像素比缩放 1px 像素边框
@media only screen and (-webkit-device-pixel-ratio: 2 )
	.border-1px
	&::before
	transform scaleY(.5)
	@media only screen and (-webkit-device-pixel-ratio: 3 )
	.border-1px
	&::before
	transform scaleY(.333333)

//根据像素比来使用 2x 图 3x 图
bg-image($url)
	background-image: url($url + "@2x.png")
	@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
	background-image: url($url + "@3x.png")


//清除浮动
clearFix()
	*zoom 1
	&::after
	content ''
	display block
	clear both

四、分析应用的整体vue组件结构

src
|-- components------------非路由组件文件夹
 |-- FooterGuide---------------底部组件文件夹
  |-- FooterGuide.vue--------底部组件 vue 
  
|-- pages-----------------路由组件文件夹
 |-- Msite---------------首页组件文件夹
  |-- Msite.vue--------首页组件vue  
 |-- Search----------------搜索组件文件夹
  |-- Search.vue---------搜索组件 vue
 |-- Order--------------订单组件文件夹
  |-- Order.vue-------订单组件 vue
 |-- Profile--------------个人组件文件夹
  |-- Profile.vue-------个人组件 vue
  
|-- App.vue---------------应用根组件vue
|-- main.js---------------应用入口js

五、写对应基础代码

https://www.cnblogs.com/chenxi188/p/13891559.html

1.App.vue

<template>
	<div>
		app
	</div>
</template>

<script>
	export default {}
</script>

<style lang="stylus" rel="stylesheet/stylus">
</style>

2.main.js render的es6写法

render: h => h(App)新写法详见：
https://www.cnblogs.com/chenxi188/p/13891559.html

// 入口文件
import Vue from 'vue'
import App from './App'

// 2.0新版本es6写法
new Vue({
	el: '#app',
	render: h => h(App)
})


/*
 //1.0版写法
 new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})
*/

3.dos建立pages/下文件夹

mkdir  Profile Order Search Msite

4.dos创建对应文件

此处用了三种方式，保存为bat文件执行，或逐条复制到cmd执行
其中type效果最好，不会在文件里放任何内容

cd>./Profile/Profile.vue 
type nul>./Order/Order.vue
copy nul>./Search/Search.vue 
copy nul>./Msite/Msite.vue

分别写入基础代码：

<template>
<div>msite（对应的文件名）</div>
</template>

<script>
	export default{}
</script>

<style lang='stylus' rel='stylesheet/stylus'>
	
</style>

六、写根目录/static/css/reset.css并引入

/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, input {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: normal;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* custom */
a {
  color: #7e8c8d;
  text-decoration: none;
  -webkit-backface-visibility: hidden;
}

li {
  list-style: none;
}

::-webkit-scrollbar {
   5px;
  height: 5px;
}

::-webkit-scrollbar-track-piece {
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:vertical {
  height: 5px;
  background-color: rgba(125, 125, 125, 0.7);
  -webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:horizontal {
   5px;
  background-color: rgba(125, 125, 125, 0.7);
  -webkit-border-radius: 6px;
}

html, body {
   100%;
  height: 100%;
}

body {
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/*显示省略号*/
.ellipsis{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

引入重置样式根目录/index.html

<link rel="stylesheet" href="/static/css/reset.css">

七、主页引入矢量图标样式、移动端设置、及解决点击0.3秒延迟问题

含完整index.html代码

<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8">
	<!-- 视窗定义：主要用于移动端 -->
	  <meta name="viewport"
	        content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
	  <title>gshop</title>
	  <!-- 重置样式 -->
	  <link rel="stylesheet" href="/static/css/reset.css">
	  <!-- 矢量图标样式 -->
	  <link rel="stylesheet" href="http://at.alicdn.com/t/font_518606_6676bmcalnrhehfr.css"></link>

	  <!-- 解决点击响应延时 0.3s 问题 含script标签内代码 -->
	  <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
	  <script>
	    if ('addEventListener' in document) {
	      document.addEventListener('DOMContentLoaded', function() {
	        FastClick.attach(document.body);
	      }, false);
	    }
	    if(!window.Promise) {
	      document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
	    }
	  </script>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>