Vue项目构建流程

一 安装相关环境 Git  Vue 等

二 创建一个新项目 在所要创建的文件目录下 进入cmd 或者git bash

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

vue init webpack my-project

#安装依赖包

cd my-project

npm install  #只需要电脑首次安装使用

npm run dev  #运行该项目

三在项目中，app.vue中style改成如下，去除浏览器的默认文件。

<style>
*{
  margin:0;
  padding:0;
  list-style: none;
}
</style>

在main.js文件中加入：

import './config/rem'

表示使用rem的响应式布局。与之对应的在src目录下创建config文件夹，以及文件夹下的rem.js文件。将所需的代码写入。

访问创建的vue项目首页：

http://localhost:8080/#/

进行移动端的配置：

 <!--利用meta标签做移动端的配置-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=0">

装一个包：

在命令行窗口输入：

npm install px2rem-loader 

这个包可以将代码中px的值自动转成rem

配置该包：

vue项目下的build->utils.js下面

var px2remLoader = {
    loader:'px2rem-loader',
    options:{
      remUnit:50
    }
},

加入这个进行配置，1rem=50px. 数值可更改。并将该变量引入到generateLoaders函数中。