vue - vue项目的搭建以及初始化

一、项目的搭建

• 首先，检查一下之前是否已经安装了脚手架：

  可以通过

  vue-V

  来检查
  

npm install -g vue-cli
cnpm install -g vue-cli    //淘宝镜像安装

vue init webpack

• 安装完成后多出这些文件夹以及文件：
  
• 各个文件的用途：
  

二、项目的初始化

1. 安装依赖包

• 请求方法axios：

  npm install axios
  或者
  cnpm install axios  	(淘宝镜像的方式)

• 状态管理vuex

  npm install vuex --save

• 如果是用less来写样式就安装less编译

  npm install less-loader  --save -dev
  或者
  npm install less-loader --save

• 如果是用sass来写样式就安装sass编译

  npm install --save-dev sass-loader
  或者
  npm install --save-dev node-sass

• 使用到的其他ui框架，可以参照对应的官网进行安装使用

2. 在main.js文件进入使用的依赖包

3. 新增文件夹存放对应的文件

4. 使用glup编译样式使之能兼容多种浏览器

在这里我只列举出less的编译，sass的编译也类似

• 在项目下面新建一个gulpfile.js文件‘’
  
• 写入一下的代码：
  

var gulp = require ( 'gulp' ) ,
less = require ( 'gulp-less' ) ,
autoprefixer = require ( 'gulp-autoprefixer' );

gulp.task ( 'testLess' , function () {
gulp.src ( './src/common/style/*.less' )
.pipe ( less () )
.pipe ( autoprefixer ( {
overrideBrowserslist: [ 'last 2 versions' , 'Android >= 4.0' ] ,
cascade : true , //是否美化属性值 默认：true 像这样：
//-webkit-transform: rotate(45deg);
// transform: rotate(45deg);
remove : true //是否去掉不必要的前缀 默认：true
} ) ).pipe ( gulp.dest ( './src/common/style' ) );
} );

gulp.task ( 'watch' , function () {
gulp.watch ( './src/common/style/*.less' , [ 'testLess' ] );
} );

gulp.task ( 'testAutoFx' , function () {
gulp.src ( './src/common/style/*.css' ).pipe ( autoprefixer ( {
overrideBrowserslist: [ 'last 2 versions' , 'Android >= 4.0' ] ,
cascade : true , //是否美化属性值 默认：true 像这样：
//-webkit-transform: rotate(45deg);
// transform: rotate(45deg);
remove : true //是否去掉不必要的前缀 默认：true
} ) ).pipe ( gulp.dest ( './src/common/style' ) );
} );

• 注意，在这之前要先安装gulp以及gulp-autoprefixer

  npm install gulp@3.9.1 -g    全局安裝
  npm install gulp-autoprefixer --save-dev

  使用

  gulp -v

  来检查是否安装成功
  注意局部的gulp跟全局的gulp版本一定要一致

  npm install  --save gulp@3.9.1    局部安裝

  
• 安装完成启动即可，每当保存一次less文件，gulp就会自动编译
  
  编译之前：
  
  编译之后：
  

5. 初始化样式文件

html, body, div, span,  h1, h2,  p,  a, i, ul, li, textarea,input { margin:0; padding:0;  }
i {font-style:normal;}
body {font-size: 16px; line-height: 1.5; font-family:'Microsoft Yahei','simsun','arial','tahoma';  color: #333; box-sizing: border-box;}
h1, h2{ font-size: 100%; font-weight: normal; }
button,input,select,textarea{font-size:100%;}
img{border:0;}
a,
img {
-webkit-touch-callout: none
}
a,
a:active,
a:focus,
a:hover,
a:visited {text-decoration: none}
input[type=password],
input[type=text],
textarea {
resize: none;
outline: 0;
-webkit-appearance: none;
white-space: pre-wrap;
word-wrap: break-word;
background: #fff
}
ul { list-style: none; }
:focus{ outline:none;}
.clearfix{ clear: both; content: ""; display: block; overflow: hidden }
.clear{clear: both;}
.fl{ float: left; }
.fr{float: right;}
input{outline: 0 none;border: 0 none;}

根据自己的需求进行修改

6. 如果是移动端（app），可以使用.px2rem进行适配

• 在公共的js文件夹里面新建 hotcss.js 文件，并写入一下代码
  
  
  

(function (window, document) {

'use strict';

//给hotcss开辟个命名空间，别问我为什么，我要给你准备你会用到的方法，免得用到的时候还要自己写。
var hotcss = {};

(function () {
//根据devicePixelRatio自定计算scale
//可以有效解决移动端1px这个世纪难题。
var viewportEl = document.querySelector('meta[name="viewport"]'),
hotcssEl = document.querySelector('meta[name="hotcss"]'),
dpr = window.devicePixelRatio || 1,
maxWidth = 540,
designWidth = 0;

dpr = dpr >= 3 ? 3 : (dpr >= 2 ? 2 : 1);

//允许通过自定义name为hotcss的meta头，通过initial-dpr来强制定义页面缩放
if (hotcssEl) {
var hotcssCon = hotcssEl.getAttribute('content');
if (hotcssCon) {
var initialDprMatch = hotcssCon.match(/initial\-dpr=([\d\.]+)/);
if (initialDprMatch) {
dpr = parseFloat(initialDprMatch[1]);
}
var maxWidthMatch = hotcssCon.match(/max\-width=([\d\.]+)/);
if (maxWidthMatch) {
maxWidth = parseFloat(maxWidthMatch[1]);
}
var designWidthMatch = hotcssCon.match(/design\-width=([\d\.]+)/);
if (designWidthMatch) {
designWidth = parseFloat(designWidthMatch[1]);
}
}
}

document.documentElement.setAttribute('data-dpr', dpr);
hotcss.dpr = dpr;

document.documentElement.setAttribute('max-width', maxWidth);
hotcss.maxWidth = maxWidth;

if (designWidth) {
document.documentElement.setAttribute('design-width', designWidth);
}
hotcss.designWidth = designWidth; // 保证px2rem 和 rem2px 不传第二个参数时, 获取hotcss.designWidth是undefined导致的NaN

var scale = 1 / dpr,
content = 'width=device-width, initial-scale=' + scale + ', minimum-scale=' + scale + ', maximum-scale=' + scale + ', user-scalable=no';
// content = 'width=device-width, initial-scale=' + 1 + ', minimum-scale=' + 1 + ', maximum-scale=' + 1 + ', user-scalable=no';

//平台、设备和操作系统
var system = {
win: false,
mac: false,
xll: false,
ipad: false
};

//通过判断设备类型
var p = navigator.platform;
system.win = p.indexOf("Win") == 0;
system.mac = p.indexOf("Mac") == 0;
system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
system.ipad = (navigator.userAgent.match(/iPad/i) != null) ? true : false;
//跳转语句，如果是平板访问就自动跳转到[图片]wap.baidu.com页面
if (system.ipad) {
// content = 'width=device-width, initial-scale=' + scale + ', minimum-scale=' + scale + ', maximum-scale=' + scale + ', user-scalable=no,viewport-fit=cover';
}
console.log('scale------->', scale);

if (viewportEl) {
viewportEl.setAttribute('content', content);
} else {
viewportEl = document.createElement('meta');
viewportEl.setAttribute('name', 'viewport');
viewportEl.setAttribute('content', content);
document.head.appendChild(viewportEl);
}

})();

hotcss.px2rem = function (px, designWidth) {
//预判你将会在JS中用到尺寸，特提供一个方法助你在JS中将px转为rem。就是这么贴心。
if (!designWidth) {
//如果你在JS中大量用到此方法，建议直接定义 hotcss.designWidth 来定义设计图尺寸;
//否则可以在第二个参数告诉我你的设计图是多大。
designWidth = parseInt(hotcss.designWidth, 10);
}

return parseInt(px, 10) * 320 / designWidth / 20;
};

hotcss.rem2px = function (rem, designWidth) {
//新增一个rem2px的方法。用法和px2rem一致。
if (!designWidth) {
designWidth = parseInt(hotcss.designWidth, 10);
}
//rem可能为小数，这里不再做处理了
return rem * 20 * designWidth / 320;
};

hotcss.mresize = function () {
//对，这个就是核心方法了，给HTML设置font-size。
var innerWidth = document.documentElement.getBoundingClientRect().width || window.innerWidth;

if (hotcss.maxWidth && (innerWidth / hotcss.dpr > hotcss.maxWidth)) {
innerWidth = hotcss.maxWidth * hotcss.dpr;
}

if (!innerWidth) {
return false;
}

document.documentElement.style.fontSize = (innerWidth * 20 / 320) + 'px';

hotcss.callback && hotcss.callback();

};

hotcss.mresize();
//直接调用一次

window.addEventListener('resize', function () {
clearTimeout(hotcss.tid);
hotcss.tid = setTimeout(hotcss.mresize, 33);
}, false);
//绑定resize的时候调用

window.addEventListener('load', hotcss.mresize, false);
//防止不明原因的bug。load之后再调用一次。

setTimeout(function () {
hotcss.mresize();
//防止某些机型怪异现象，异步再调用一次
}, 333);

window.hotcss = hotcss;
//命名空间暴露给你，控制权交给你，想怎么调怎么调。

})(window, document);

• 在less文件夹下面新建一个 px2rem.less 文件，写入一下代码
  

@designWidth:750;   //适配的屏幕宽度

//属性名，值
.px2rem(@name, @length){
@{name}: unit(@length*320/@designWidth/20 , rem);
// @{name}: unit(@length , px);

// @{name}: unit(@length , px);
}

• 在其他的样式文件（其他的样式文件都写在style文件夹下面）中直接引入 px2rem.less 文件即可