vue实战|vue项目搭建及基本配置

前言

注：适用于windows系统
本文讲述要点：

vue-cli项目搭建基本环境配置；
常用插件描述及分享；
项目运行、调试及打包；
项目配置及优化；

适用人群：

vue小白；
有html\css\js编程基础；
vue项目整体优化（打包后压缩空间）；

一、准备阶段

准备阶段会将项目环境配置完毕,包含node、npm、webpack和vue-cli。已经完成的小伙伴可以跳过此步骤看第二阶段。

1.安装`node`及`npm`

从node.js中文网下载并安装nodejs点击下载.msi的32/64位安装包，然后双击本地文件一路点击下一步完成nodeJs的安装即可。<font size=2 color=#ff6666>注意安装8.10以上版本哟!</font>
安装完成后，打开命令行工具，输入node -v，如下：

E:\>node -v
v8.12.0     //版本号

顺便在此处继续输入npm -v

E:\>npm -v
6.4.1       //版本号

你会惊讶的发现npm已经神奇的安装完成了。这是因为npm在安装nodeJs的时候顺带已经装好了。

2.安装`webpack`

注：以下所有npm操作，由于国内速度较慢甚至出现失败，可用淘宝镜像cnpm替代。下列所有npm命令，用cnpm替代即可。方式如下：

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

继续刚才的命令行工具，输入npm install webpack -g，-g代表全局安装。安装完成后继续输入webpack -v，出现相应版本号，代表安装成功。
我在安装时出现如下状况：

One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
 - webpack-cli (https://github.com/webpack/webpack-cli)
   The original webpack full-featured CLI.
We will use "npm" to install the CLI via "npm install -D".
Do you want to install 'webpack-cli' (yes/no):

解决方案是：输入npm install webpack-cli -g。安装成功后执行webpack -v查看版本号，如下：

E:\>npm install  webpack-cli -g
*
*  安
*  装                省
*  过                略
*  程
*

E:\>webpack -v
4.29.6  //版本号

3.安装vue脚手架`vue-cli`

继续上面的命令行工具。接下来就是安装配置今天的主角了，vue脚手架工具vue-cli。方法一样，键入命令行npm install vue-cli -g全局安装，然后输入vue -V<font size=1 color=red>注：是大写的-V</font>检测是否安装成功。如下：

E:\>vue -V
2.9.6       //版本号

4.小结

至此，我们已经完成了准备阶段的工作。主要完成的是node、npm、webpack和vue-cli四个工具的环境配置。目前为止，我们在命令行工具的总结应该是如下：版本号不必一致

E:\>node -v
v8.12.0

E:\>npm -v
6.4.1

E:\>webpack -v
4.29.6

E:\>vue -V
2.9.6

二、项目搭建

本阶段讲述vue-cli项目搭建及相关配置，包含创建项目、修改基础配置、项目运行三个模块，可自行选择阅读或跳过。

1.项目创建

建立一个空文件夹，最好以纯英文命名。例，我项目路径为E>stydy。打开命令行工具，cd到该文件目录下，执行vue init webpack name，name可替换为你要创建的项目名。回车之后，会要求输入一系列的信息，大部分可直接回车略过，注释如下，没有注释的回车略过即可：

E:\stydy>vue init webpack blog

? Project name blog //项目名
? Project description A Vue.js project  //项目简介
? Author xuan0146 <zxm0146@163.com> //作者
? Vue build runtime
? Install vue-router? Yes   //使用项目路由
? Use ESLint to lint your code? No  //不开启ESLint语法检测 注意选No
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "blog".

最后一步选择npm或者yarn则会自动执行npm install安装项目所有依赖包。不选择的话，自己安装也是同样效果。安装步骤为：

cd到项目路径；
执行npm install；
等待完成安装即可;

2.项目介绍

cd到该项目，或者打开文件夹，项目目录及备注如下：

├── project //项目目录
│  ├── build    //webpack相关配置
│  │  ├── build.js  //生产环境构建
│  │  ├── check-versions.js //版本检查
│  │  ├── utils.js  //构建相关工具
│  │  ├── vue-loader.conf.js    //处理vue文件的配置信息
│  │  ├── webpack.base.conf.js  //webpack基础配置
│  │  ├── webpack.dev.conf.js   //webpack开发环境配置
│  │  ├── webpack.prod.conf.js  //webpack生产环境配置
│  ├── config   //vue基本配置
│  │  ├── dev.env.js    //开发环境配置
│  │  ├── index.js  //主要配置
│  │  ├── prod.env.js   //生产环境配置
│  │  ├── test.env.js   //测试环境配置
│  ├── node_modules //依赖包 忽略
│  ├── src  //项目核心文件
│  │  ├── assets    //静态资源 如公用js\css\image\媒体资源等
│  │  ├── components    //公用组件
│  │  ├── router    //项目路由
│  │  │  ├── index.js   //路由控制文件
│  │  ├── App.vue   //根组件
│  │  ├── main.js   //入口文件
│  ├── static   //静态资源
│  ├── test //模拟测试
│  ├── .babelrc //babel参数
│  ├── .editorconfig    //代码格式
│  ├── .gitignore   //git上传相关配置
│  ├── .postcssrc.js    //css相关工具
│  ├── index.html   //主页
│  ├── package-lock.json    //记录当前状态下实际安装的各个npm package的具体来源和版本号
│  ├── package.json //项目信息
│  ├── README.md    //项目说明

3.启动项目

命令行工具键入npm run dev，等待片刻，直到提示如下，则表示启动成功：

E:\stydy\blog>npm run dev

* * * * * * * *
* 启动过程忽略 *
* * * * * * * *

Your application is running here: http://localhost:8080

然后复制http://localhost:8080，在浏览器地址栏输入该url，进入如下页面：

vue运行成功.png

4.移动端调试

有的人可能要问了，如果我做移动端项目，不能用localhost去访问了吧？当然不能，只需要稍微改一下配置即可。当然，端口号8080一样可以修改，不过一般不做变动。
用代码工具（自己习惯的IDE）打开本项目。首先查看本机电脑ip,键入命令ipconfig，查看如下：

E:\stydy\blog>ipconfig
* *
* *
以太网适配器 以太网:

   连接特定的 DNS 后缀 . . . . . . . :
   本地链接 IPv6 地址. . . . . . . . : fe80::da7:800d:d148:e06%10
   IPv4 地址 . . . . . . . . . . . . : 192.168.200.127
   子网掩码  . . . . . . . . . . . . : 255.255.255.0
   默认网关. . . . . . . . . . . . . : fe80::48:5112:9520:564f%10
                                       192.168.200.1

其中，IPv4 地址即为我们所需要的ip。在项目/config/index.js中，找到host: 'localhost'，改成IPv4 地址，例:我的地址为192.168.200.127:

module.exports = {
  dev: {
    host: '192.168.200.127',    //localhost改为ip
    port: 8080,     //端口号
  }
}

然后，我们重新启动项目。注意上次项目启动后，由于修改了配置文件，因此需要停止项目然后重新启动。停止项目的命令为Ctrl + C。重启项目后，如下：

E:\stydy\blog>npm run dev
* * * * * * * *
* 启 动 过 程 *
* * * * * * * *
Your application is running here: http://192.168.200.127:8080

（注意要在同一网络下。）
最后，我们复制该地址，即可在所有端PC、手机、pad等查看该项目啦~

三、常用插件

本章节记录一些vue常用插件，如axios、echarts、sass/scss、lib-flexible等等。所有命令均可用cnpm替代。如不需要可直接跳过。、

1.sacc/scss

用途：可用sass/scss进行css书写代码。命令行工具依次键入如下命令：

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

安装完成后，.vue里的style里添加lang="scss"来指定语言，即可用sass/scss编写css代码。如下：

<style lang="scss" scoped>
...
</style>

2.axios

用途：平时前后端交互使用Ajax，在vue官方，给出vue-resource和axios的作为ajax的替代。在此处使用vue官方推荐首选的axios作为案例讲述。

安装

npm install axios

全局引入
在项目/src/main.js中引入如下代码，然后随意走个请求，发现……报错？并且在页面F12控制台Newwork>Headers里面发现数据并没有Form Data形式提交，如何处理呢？见下一步解决。

import axios from 'axios'

解决数据格式问题

//完整请求代码  post为例
this.$axios.post('url', {   //路径
  key1: 'value',        //参数
  key2: 'value'     //参数
}, 

/* *
* 添加如下代码
* * * * * * start * * * * * 
{
  transformRequest: [function (data) {
    let ret = '';
    for (let it in data) {
      ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
    }
    return ret
    }
  ],
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
}
/* * * * * * end * * * * *

).then((response) => {  //返回数据
  console.log(response)
}).catch((error) => {   //请求异常捕捉
  console.log(error)
})

3.axios解决方案

另外一个axios数据格式问题的解决方案。 重磅推荐★★★★★此方案不仅解决数据格式问题，还顺便解决了跨域问题。第一步当然还是安装axios，同上一步。然后，安装qs，命令行工具键入npm install qs --save-dev。然后在项目/src/main.js中配置如下：

import axios from 'axios'
import qs from 'qs' 

Vue.prototype.$axios = axios;
Vue.prototype.$qs = qs;

然后在项目/config/index.js中，找到proxyTable，配置及说明如下：

proxyTable: {
  '/api': {
    //设置url公用部分
    target: 'http://192.168.1.100:8080/',   
    changeOrigin: true,   // 如果接口跨域，需要进行这个参数配置
    pathRewrite: {
      '^/api': ''      //这里理解成用‘/api’代替target里面的地址
    }
  }
},

配置完成之后，在.vue文件中，请求用例如下：

//参数
let params = this.$qs.stringify({
  key: value
});
//请求
this.$axios.post('/api/test', params).then((response) => {
  console.log(response);
}).catch((error) => {
  console.log(error);
})

最后，键入命令npm run dev，发现请求数据格式已经成为Form Data的格式，并且即使后端不处理跨域问题，也依然正常可用。原因是proxy作为中间层，先将数据请求回本地，此过程是中间层node请求后台，不存在跨域。然后请求过来的数据放在本地，前端再去请求这个数据，就可以解决跨域问题了。

4.echarts可视化

如今相信大家不少项目需要用到数据可视化吧？各种统计图表、炫酷可视化效果等等，都需要一个不错的插件去支撑，比如D3、AnyChart、echarts、HighCharts等等。本案例用百度的echarts作为案例讲解。

安装依赖
惯例，先装依赖。命令行工具执行npm install echarts --save-dev。
全局配置
安装完成后，全局引入。引入方法：进入项目/src/main.js，如下操作：

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

使用
在***.vue组件中即可正常使用。我在此处用Hello.vue写示例：

//template
<div id="demo"></div>

//script
let myChart = this.$echarts.init(document.getElementById('demo')); //初始化
//myChart.clear();  //根据需求配置
myChart.setOption({ // 图表配置
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line',
    smooth: true
  }]
});

//style
#demo{
  width: 500px;
  height: 500px;
}

效果图

echartsDemo.png
按需引入
试过之后会发现echarts的包很大，会导致打包之后文件过大，因此如果不是刚需的情况下，建议按需引入来完成页面，会节省许多资源及开销。首先，将刚才项目/src/main.js中的两行代码注释掉。接下来，依然以Hello.vue举例，如下：

//template && style 不作变动

//script
const echarts = require('echarts/lib/echarts'); //基本模板
require('echarts/lib/chart/line');  //折线图组件
require('echarts/lib/component/title'); //标题组件

 // 初始化实例
let myChart = echarts.init(document.getElementById('demo'));
// 图表配置
myChart.setOption({
  title: { text: '引入title组件可使用标题' },
  * * * * * * * *
  * 别的配置不变 *
  * * * * * * * *
});

5.lib-flexible | px2rem-loader

lib-flexible作用在于写页面的时候实现自适应效果，包括文图排本等。需要配合px2rem-loader使用。步骤如下：

安装依赖

npm i lib-flexible --save-dev

npm install px2rem-loader --save-dev

引入
项目/src/main.js中做如下配置：

import 'lib-flexible

主页添加视口配置
项目/index.html中的head中添加：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

px2rem配置
项目/build/utils.js中如下配置，然后重启项目即可：

//自适应字体配置
const px2remLoader = {
  loader: 'px2rem-loader',
  options: {
    remUnit: 37.5   //设计稿的宽度除以 10，现阶段一般设计稿的宽度都为750px。如果基于iPhone5设计则为32.0(320 / 10 = 32)
  }
}

function generateLoaders (loader, loaderOptions) {
  const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

  * * *
}

更多关于px2rem的介绍请移步官网

四、项目打包

本章节介绍打包以及去除打包后资源中的.map文件。
开发完成后，怎么打包到线上呢？emm...this is a problem.

1.打包

命令行工具cd到该项目下，执行npm run build来构建项目：

E:\stydy\blog>npm run build

                                                  Asset       Size  Chunks                    Chunk Names
               static/js/vendor.38756a8637fc194013f9.js     442 kB       0  [emitted]  [big]  vendor
                  static/js/app.0b5326236ed4caddb252.js     1.1 kB       1  [emitted]         app
             static/js/manifest.2ae2e69a05c33dfc65f8.js  857 bytes       2  [emitted]         manifest
    static/css/app.26e0081e2c66d97635076ad7fefbb5b6.css  164 bytes       1  [emitted]         app
static/css/app.26e0081e2c66d97635076ad7fefbb5b6.css.map  348 bytes          [emitted]
           static/js/vendor.38756a8637fc194013f9.js.map    2.38 MB       0  [emitted]         vendor
              static/js/app.0b5326236ed4caddb252.js.map    8.47 kB       1  [emitted]         app
         static/js/manifest.2ae2e69a05c33dfc65f8.js.map    4.97 kB       2  [emitted]         manifest
                                             index.html  571 bytes          [emitted]

  Build complete.

2.位置

打包完成后，去哪儿了呢？然后会发现在项目路径下，出现了一个dist的文件夹，这里面就是所谓的*** 包 ***了。如下：

├── project 
│  ├── build    
│  ├── config   
│  ├── dist     // 包    
│  │  ├── static    // 压缩后的资源
│  │  ├── index.html    // 主页
│  ├── node_modules 
│  ├── src  
│  ├── static   
│  ├── test 
│  ├── .babelrc 
│  ├── .editorconfig    
│  ├── .gitignore   
│  ├── .postcssrc.js    
│  ├── index.html   
│  ├── package-lock.json    
│  ├── package.json 
│  ├── README.md

3.问题&解决

细心的你可能发现了，dist/static/css(或js)里面，每个css文件和js文件下有一个同名的.map文件，非常占空间，那它是做什么的呢？又怎么消除呢？

作用
查过资料的小伙伴知道了，.map文件的作用就是：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。
如何解决
那么该如何处理这些文件呢？进入项目/config/index.js，定位到productionSourceMap，将其值改为false即可。如下：

productionSourceMap: false,

重新打包验证
在命令行工具重新执行npm run build，发现.map文件已经消失，问题解决。如下：

E:\stydy\blog>npm run build

                                              Asset       Size  Chunks                    Chunk Names
           static/js/vendor.38756a8637fc194013f9.js     442 kB       0  [emitted]  [big]  vendor
              static/js/app.3c96ecd23cc6dc073a3e.js    1.05 kB       1  [emitted]         app
         static/js/manifest.2ae2e69a05c33dfc65f8.js  799 bytes       2  [emitted]         manifest
static/css/app.26e0081e2c66d97635076ad7fefbb5b6.css   95 bytes       1  [emitted]         app
                                         index.html  571 bytes          [emitted]

  Build complete.

五、包优化

在项目逐渐壮大之后，虽然说上面已经讲述过了如何去除.map文件，但是其中许多.js文件的体积也不容小觑。尤其是发布到线上以后，某些css/js单个文件体积极可能超上兆的大小，如果项目服务器带宽不够，但是页面迸发量不低的话，分分钟就可能挂掉。有没有什么方法能进一步将包优化呢？

1.gzip打包压缩

安装gzip
惯例，打开命令行工具，安装gzip

npm install compression-webpack-plugin@1.1.11 --save-dev

配置
项目/config/index.js中，定位到productionGzip，改为true：

productionGzip: true,

重新打包
npm run build走起，会发现打包的文件中多了同名的.gz文件，体积大概压缩了2/3，很棒的体验。如下：

E:\stydy\blog>npm run build

                                              Asset       Size  Chunks                    Chunk Names
           static/js/vendor.38756a8637fc194013f9.js     442 kB       0  [emitted]  [big]  vendor
              static/js/app.3c96ecd23cc6dc073a3e.js    1.05 kB       1  [emitted]         app
         static/js/manifest.2ae2e69a05c33dfc65f8.js  799 bytes       2  [emitted]         manifest
static/css/app.26e0081e2c66d97635076ad7fefbb5b6.css   95 bytes       1  [emitted]         app
                                         index.html  571 bytes          [emitted]
        static/js/vendor.38756a8637fc194013f9.js.gz     155 kB          [emitted]

  Build complete.

nginx配置
虽然很给力的节省了许多资源，但是需要运维配合，在gninx.conf配置文件中做如下配置：

http {  
  gzip on;
  gzip_disable "msie6"; 
  gzip_vary on; 
  gzip_proxied any;
  gzip_comp_level 8;  //压缩级别
  gzip_buffers 16 8k;
  #gzip_http_version 1.1;
  gzip_min_length 100; //不压缩临界值
  gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
}

2.采用cdn加速

顾名思义，即将一些比较大的插件放在第三方服务器上去加载，这样不仅快很多，也能更加节约自己的服务器资源及宽带资源。我们一般选用unpkg或者BootCDN来作为第三方。在此处我们使用BootCDN来作为第三方加速使用。想了解更多相关知识请点击unpkg BootCDN。

查找包
打开BootCDN，在搜索栏搜索想要的第三方资源。如，我想要替换的是echarts、Vue、axios，则依次搜索echarts...，然后查找我想要的版本，然后复制<script>标签。
插入
在项目/index.html中将标签插入，如下：

<body>
<div id="app"></div>
//插入在这里
<script src="https://cdn.bootcss.com/vue/2.5.20/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
</body>

webpack配置
打开项目/build/webpack.base.conf.js中，添加externals:

module.exports = {
  context: path.resolve(__dirname, '../'),
  //..  
  externals:{
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'echarts':'echarts',
    'axios':'axios',
  }

}

main配置
打开项目/src/main.js，将Vue等注释掉即可。不注释也可。

// import Vue from 'vue'

打包
最后，见证奇迹的时刻就要到了~

E:\stydy\blog>npm run build

                                              Asset       Size  Chunks             Chunk Names
           static/js/vendor.1f9d0533037be66c61cf.js    12.3 kB       0  [emitted]  vendor
              static/js/app.912fd568ff845fde7c09.js    1.36 kB       1  [emitted]  app
         static/js/manifest.2ae2e69a05c33dfc65f8.js  799 bytes       2  [emitted]  manifest
static/css/app.edc64bd802cdc531977a30fcc8a9d6e1.css   62 bytes       1  [emitted]  app
                                         index.html  876 bytes          [emitted]
        static/js/vendor.1f9d0533037be66c61cf.js.gz    4.62 kB          [emitted]

  Build complete.

搞定
上次打包，vendor大小为442kB，本次打包，疯狂缩小至12.3kB。神不神奇_厉不厉害

结语

到这里，vue项目从环境配置、项目搭建，到结构介绍、常用插件依赖安装使用做了比较详细的介绍，最后将项目优化也做了一定的补充。
学而时习之，温故而知新。至此，以上。
欢迎做客我的博客