从零开始搭建vue项目 （晋级篇） npm run dev npm run build

 

目录

一. 前言

1. 目标

2. 搭建思路

3. 环境准备

二. 基础知识

1. 包配置安装 npm install

2. 运行项目 npm run dev

    2.1 执行npm run dev

    2.2 调用入口文件 webpack.dev.conf.js

    2.3 build/utils.js

    2.4 config/index.js

    2.5 build/webpack.base.conf.js

    2.6 引入文件顺序

3. 打包项目 npm run build

     3.1 运行 npm run build

     3.2 调用入口文件 build.js

4. 项目检查 npm run lint

三.项目搭建

---

一. 前言

1. 目标

       以前做过多个vue的项目，每个项目都有其自己的优势，想整合下之前开发过的所有vue项目中精华的部分，也是对自己的一个总结吧。

2. 搭建思路

       以vue-cli为底，在其基础上搭建项目，分几大块搭建。

3. 环境准备

       像node，npm之类的下载安装，请看 https://blog.csdn.net/zbl744949461/article/details/84784268，这是多版本的node，不需要的话，直接安装一个版本就行。

       使用的是vue2.x搭建，怎么下载搭建个基础的架子，网上有很多前辈文章可以参考，也可看 https://blog.csdn.net/zbl744949461/article/details/90516886 的 二.搭建项目。

       先用脚手架新建个项目，如下。

      

       为了防止开发时思路错了，又找不到以前的历史记录的尴尬，在本地用svn服务器做版本管理，方便对比，关于怎么使用svn服务器，请参考 https://blog.csdn.net/zbl744949461/article/details/90516886 的  二.搭建项目→ 3版本控制。（也可用git做版本控制，或其他方式都OK，看哪个方便）

       以上准备工作做完，安装包，npm install。（打包发布到服务器时，是不上传已安装完的包的，这样文件比较下，方便其他人下载，如果把包都上传了，别人下载就会很大，下的慢。包可以把项目下载到本地后自己安装）

       有网络不好或者其他问题的猿友，用npm安装很慢，即使换了淘宝镜像也不行，可以用yarn安装，npm是一个包安装完再安装下一个，yarn是所有包同时进行，所以很快。使用yarn：https://blog.csdn.net/zbl744949461/article/details/110792471

       npm安装5个小时，yarn安装300秒。

二. 基础知识

       在搭项目架构之前，要先说下现在这个vue-cli的运作方式，明白怎样掌控这个项目。

       关于vue的目录，可以看前辈的文章，很详细https://www.cnblogs.com/zhangruiqi/p/9062005.html

      最先要了解的是package.json这个文件。

      package.json里默认定义了项目名称、项目版本号、项目介绍、项目作者、执行命令、生产环境要安装的包、开发环境要安装的包、引擎版本、浏览器的限制要求。

      package.json文件中的字段script的每一个属性都是一个自定义的脚本命令，需要通过npm来执行。

      npm是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

           允许用户从npm服务器下载别人编写的第三方包到本地使用。
           允许用户从npm服务器下载并安装别人编写的命令行程序到本地使用。
           允许用户将自己编写的包或命令行程序上传到npm服务器供别人使用。

           还有常用的 卸载模块、更新模块、搜索模块、创建模块等。

      npm run 命令：npm run命令都是定义在package.json文件的scripts节点里面的，

                               npm run dev就是执行package.json中的scripts中的dev中的脚本，

                               npm run start 就是执行package.json中的scripts中的start中的脚本，也可简写 npm start

                             （有4个可简写的命令npm start、npm stop、npm test、npm restart）。

     （npm 命令：https://www.npmjs.cn/cli/run-script/）

      在这里，需要掌握4件事，包配置安装npm install，运行项目npm run dev，打包项目npm run build，项目代码检查 npm run lint

1. 包配置安装 npm install

       关于包配置，开发环境的包只有在开发环境用，生产环境的包在开发和生产都要用。

      比如我们在开发时用的是es6语言，开发环境有一个包，作用是在打包时把es6的语言转成es5的语言，

      那么打包后，在生产环境的代码是已经转成es5的代码，就不需要再转码了，所有也就不需要这个包了。

      如果是像echart（做图形的）的包，就是开发和生产环境都需要，所以要放在生产环境的包配置里。

       一般安装生产环境里要用的包，用命令 npm i xxx(包名)  -S 或 npm install xxx(包名) --save ；往开发环境安装包 npm i xxx(包名) -D 或 npm install xxx(包名) --save-dev。

       一个关于安装包的小技巧，如果已经用 npm install 安装完包了，还想安装其他的包，

       如果已经知道想安装的包的版本，可以直接在package.json的 "dependencies" 或  "devDependencies"中配置好，直接运行npm install就行，

       相当于npm检查了package.json中有哪些没被安装的包，又安装了下，npm install不会把所有包重新安装一遍。

2. 运行项目 npm run dev

    2.1 执行npm run dev

      npm run 是执行脚本的命令。

      npm run dev 就是执行package.json 里的scripts的dev属性的脚本

      

      webpack-dev-server是开发服务器，npm run dev 就是启动这个服务器，后面都是配置这个服务器的启动参数。

      --inline ：webpack-dev-serve有2种刷新模式 inline模式和iframe模式。     

      官方文档：https://webpack.docschina.org/configuration/dev-server/#devserverinline

      2种模式的介绍：  https://segmentfault.com/a/1190000014141798

      inline模式 是在 bundle 中插入脚本以进行实时重新加载，并且构建消息将出现在浏览器控制台中，

      iframe模式是在网页中嵌入了一个iframe，将我们自己的应用注入到这个iframe当中去，在通知栏下使用带有有关构建消息的